/* ============================================================
   Rocha & Santos Advocacia — Landing page styles
   Mobile-first. Boutique, warm, editorial.
   ============================================================ */

/* Local body font. Falls back to Lato from Google Fonts, then system fonts.
   Os .woff2 são variable fonts (eixo wght 300–800): o range no descritor
   font-weight libera os pesos reais — um valor fixo (400) clamparia o eixo
   e forçaria negrito sintético em <strong>/600/700. */
@font-face {
  font-family: "Anthropic Sans Web Text";
  src: url("assets/fonts/anthropic-sans-web-text-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
  font-family: "Anthropic Sans Web Text";
  src: url("assets/fonts/anthropic-sans-web-text-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
}

:root {
  --primary: #8b644b;
  --primary-dark: #8b644b;
  --primary-deeper: #8b644b;
  --bg: #efedeb;
  --bg-soft: #f7f4ef;
  --bg-warm: #ece6dd;
  --hero-bg: #cccbc7;
  --cta: #25d366;      /* verde oficial WhatsApp */
  --cta-dark: #1da851;
  --text: #413a34;
  --text-muted: #6f625a;
  --text-faint: #98897e;
  --on-dark: #f4ece0;
  --on-dark-muted: rgba(244, 236, 224, 0.72);
  --border-soft: rgba(139, 100, 75, 0.18);
  --border-softer: rgba(139, 100, 75, 0.10);
  --r-card: 14px;
  --r-btn: 8px;
  --max: 1180px;
  --pad: clamp(32px, 8vw, 40px); /* mobile com respiro lateral generoso (32 → 40px) */
  --btn-wide: 311px;
  --font-heading: "Playfair Display", "Times New Roman", serif;
  --font-body: "Anthropic Sans Web Text", "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-numbers: "Spectral", "Times New Roman", serif; /* lining figures para círculos numerados */
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.logo-mark {
  --logo-color: var(--primary);
  display: block;
  aspect-ratio: 14247.202 / 19250.861;
  background-color: var(--logo-color);
  -webkit-mask-image: url("assets/ROCHA-SANTOS_LOGO.svg");
  mask-image: url("assets/ROCHA-SANTOS_LOGO.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-style: italic;
  color: var(--text);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.005em;
}
p { margin: 0; text-wrap: pretty; }

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

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

section { position: relative; }

.section {
  padding-block: clamp(56px, 9vw, 112px);
}
.section--tight {
  padding-block: clamp(44px, 7vw, 88px);
}

.eyebrow {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.eyebrow.on-dark { color: var(--on-dark); }

.section-title {
  font-size: clamp(28px, 4.4vw, 44px);
  margin-top: 14px;
}
.section-title.center { text-align: center; }
.section-lead {
  font-family: var(--font-body);
  font-style: normal;
  color: var(--text-muted);
  font-size: clamp(15px, 1.6vw, 17px);
  max-width: 62ch;
  margin-top: 16px;
}
.section-lead.center { margin-inline: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--r-btn);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
  text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--cta {
  background: var(--cta);
  color: #fff;
}
.btn--cta:hover { background: var(--cta-dark); color: #fff; }

/* Shimmer animado nos CTAs principais — luz passando rápido,
   pausa confortável antes de repetir. */
.btn--cta, .btn--brown, .help-checklist__btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn--cta::after,
.btn--brown::after,
.help-checklist__btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 60%;
  background: linear-gradient(110deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: translateX(-180%) skewX(-12deg);
  pointer-events: none;
  z-index: 1;
  animation: btn-shimmer 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.btn--cta > *, .btn--brown > *, .help-checklist__btn > * { position: relative; z-index: 2; }
@keyframes btn-shimmer {
  0%   { transform: translateX(-180%) skewX(-12deg); }
  28%  { transform: translateX(220%) skewX(-12deg); }
  100% { transform: translateX(220%) skewX(-12deg); }
}
/* CTA outline (sem preenchimento): o shimmer interno não aparece, então o
   destaque é um pulso discreto na borda — brilho que percorre o mesmo ciclo
   de 5s dos demais CTAs, clareando o contorno e soltando um halo suave. */
.btn--outline-light:not(.help-checklist__btn) {
  animation: btn-outline-pulse 5s ease-in-out infinite;
}
@keyframes btn-outline-pulse {
  0%, 100% { border-color: rgba(244, 236, 224, 0.42); box-shadow: 0 0 0 0 rgba(255, 250, 242, 0); }
  10%      { border-color: rgba(255, 250, 242, 0.95); box-shadow: 0 0 18px 0 rgba(255, 250, 242, 0.28); }
  26%      { border-color: rgba(244, 236, 224, 0.42); box-shadow: 0 0 0 0 rgba(255, 250, 242, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--cta::after, .btn--brown::after,
  .help-checklist__btn::after { animation: none; opacity: 0; }
  .btn--outline-light:not(.help-checklist__btn) { animation: none; }
}

.btn--ghost {
  background: transparent;
  color: var(--primary-dark);
  border: 1px solid var(--border-soft);
}
.btn--ghost:hover { background: rgba(139, 100, 75, 0.06); }

.btn--brown {
  background: var(--primary);
  color: #fff;
}
.btn--brown:hover { background: var(--primary-dark); color: #fff; }

.btn--outline-light {
  background: transparent;
  color: #fffaf2;
  border: 1px solid rgba(244, 236, 224, 0.42);
}
.btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(244, 236, 224, 0.7);
  color: #fffaf2;
}
.service--brown .judicial-check-btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--primary-dark);
}

.btn--pill { border-radius: 999px; padding-inline: 40px; }
.btn--block { width: 100%; }
.btn--lg {
  min-width: var(--btn-wide);
  max-width: 100%;
  min-height: 54px;
  padding: 14px 28px;
  font-size: 16px;
}

.btn .ic-wa { width: 20px; height: 20px; }
/* Ícones temáticos / WhatsApp nos CTAs de seção — dimensão proporcional ao botão */
.service-foot .btn svg,
.reviews-foot .btn svg { width: 20px; height: 20px; flex: none; }
@media (max-width: 879px) {
  .btn .ic-wa,
  .service-foot .btn svg,
  .reviews-foot .btn svg { width: 23px; height: 23px; }
}

/* CTA buttons — tipografia eyebrow: caixa alta, espaçado, refinado */
.service-foot .btn,
.reviews-foot .btn,
.help-checklist__btn {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-inline: 48px; /* respiro entre texto e borda — aumenta largura mas preserva altura */
}

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

/* ---------- Hero tagline bar (segundo "cabeçalho" — destaque sob o hero) ---------- */
.hero-tagline-bar {
  display: block;
  position: relative;
  z-index: 2;
  margin-top: -1px;
  background: var(--bg-soft);
  border-top: 0;
  border-bottom: 0;
}
.hero-tagline-bar .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tagline-rotator {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 4.5em;
}
.tagline-item {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.5em;
  max-width: 100%;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary-dark);
  text-align: center;
  line-height: 1.5;
  opacity: 0;
  text-wrap: balance;
}
.hero-tagline-bar.is-visible .tagline-item--1 {
  animation: tagline-switch 10s ease-in-out infinite;
}
.hero-tagline-bar.is-visible .tagline-item--2 {
  animation: tagline-switch 10s ease-in-out infinite;
  animation-delay: -5s;
}
@keyframes tagline-switch {
  0%   { opacity: 0; transform: none; }
  8%   { opacity: 1; transform: none; }
  42%  { opacity: 1; transform: none; }
  50%  { opacity: 0; transform: none; }
  100% { opacity: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tagline-item { animation: none !important; }
  .tagline-item--1 { opacity: 1; transform: none; }
  .tagline-item--2 { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  background: var(--hero-bg);
  border-bottom: 0;
  overflow: hidden;
  position: relative;
  /* +1px em todas as alturas do hero: compensa o margin-top -1px da
     .hero-tagline-bar, para hero + barra fecharem exatamente 100vh
     (sem isso, 1px da seção seguinte vaza na base da tela). */
  height: calc(100dvh - 79px);
  min-height: 500px;
  display: flex;
  align-items: center;
}
.hero::before {
  content: "";
  position: absolute;
  left: -200px;
  right: -200px;
  top: -340px;
  bottom: -340px;
  background-color: var(--primary);
  -webkit-mask-image: url("assets/ROCHA-SANTOS_LOGO.svg");
  mask-image: url("assets/ROCHA-SANTOS_LOGO.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* Desktop: monograma de fundo deslocado para cima e para a esquerda,
     harmonizando com o título e a logo. */
  -webkit-mask-position: 46% 44%;
  mask-position: 46% 44%;
  -webkit-mask-size: min(96vh, 102%) auto;
  mask-size: min(96vh, 102%) auto;
  opacity: 0.22; /* monograma mais evidente — sem mexer no parallax */
  /* Apenas a entrada (fade-in). O reflexo de luz que ficava aqui foi movido
     para a logo do hero (.hero-logo) e a logo do Contato.
     O parallax do scroll (transform) permanece intocado. */
  animation: hero-monogram-in 1.6s ease-out both;
  pointer-events: none;
  z-index: 0;
  transform: translate3d(
    var(--parallax-x, 0px),
    calc(var(--parallax-y, 0px) + var(--breath-y, 0px)),
    0
  ) rotate(var(--parallax-r, 0deg));
  transform-origin: center center;
  will-change: transform;
}
@keyframes hero-monogram-in {
  from { opacity: 0; }
  to   { opacity: 0.22; }
}
@keyframes hero-monogram-shimmer {
  0%   { background-position: 240% 0; }
  26%  { background-position: -140% 0; }
  100% { background-position: -140% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { transform: none; animation: none; }
}
.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  padding-block: clamp(24px, 4vw, 48px);
  width: 100%;
}
.hero-copy {
  position: relative;
  z-index: 2;
  width: fit-content;
  max-width: calc(100% - 40px);
  margin-inline: auto;
  text-align: left;
}
.hero-logo {
  width: clamp(96px, 9.5vw, 132px);
  margin-bottom: clamp(18px, 2vw, 28px);
}
.hero-eyebrow {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary-dark);
  display: block;
  margin-bottom: 18px;
}
.hero-title {
  font-size: clamp(32px, 3.9vw, 54px);
  line-height: 1.06;
  max-width: none;
  color: #2f2a26;
}
.hero-sub {
  margin-top: 22px;
  color: var(--text);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  max-width: 46ch;
}
.hero-sub strong { font-weight: 700; }
.hero-actions {
  margin-top: clamp(14px, 1.8vw, 22px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-support {
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
}
.hero-support span { display: inline-flex; align-items: center; gap: 8px; }
.hero-support span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.7;
}
.hero-support .dot { display: none; }

.hero-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: clamp(20px, 2.4vw, 32px);
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  background: transparent;
  line-height: 1;
}
.hero-chip--filled {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.hero-chip--brand {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-transform: uppercase;
  word-spacing: 0.18em;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-chip--brand::after {
    content: "";
    position: absolute;
    inset: -1.5px;
    padding: 1.5px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(110deg,
      rgba(255, 250, 242, 0) 0%,
      rgba(255, 250, 242, 0) 38%,
      rgba(255, 250, 242, 0.98) 50%,
      rgba(255, 250, 242, 0) 62%,
      rgba(255, 250, 242, 0) 100%);
    background-size: 240% 100%;
    background-position: 220% 0;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: hero-chip-border-sweep 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
}

@keyframes hero-chip-border-sweep {
  0%   { background-position: 220% 0; }
  22%  { background-position: -140% 0; }
  100% { background-position: -140% 0; }
}

/* ---------- Reflexo de luz nas logos (mesma linguagem do shimmer dos CTAs) ----------
   A varredura de luz que antes ficava no monograma de FUNDO do hero foi movida
   para cá: a logo acima do título e a logo do Contato. */
.hero-logo,
.contact-monogram .logo-mark {
  background-image: linear-gradient(115deg,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0) 58%);
  background-repeat: no-repeat;
  background-size: 280% 100%;
  background-position: 240% 0;
  animation: logo-shimmer-sweep 6.5s ease-in-out 1.2s infinite;
}
@keyframes logo-shimmer-sweep {
  0%   { background-position: 240% 0; }
  32%  { background-position: -150% 0; }
  100% { background-position: -150% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo,
  .contact-monogram .logo-mark { animation: none; }
  .hero-chip--brand::after { animation: none; opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-logo,
  .hero-title,
  .hero-chips {
    animation: hero-copy-reveal 820ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .hero-logo {
    /* entrada (reveal) + reflexo de luz contínuo na logo */
    animation: hero-copy-reveal 820ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both,
               logo-shimmer-sweep 6.5s ease-in-out 1.6s infinite;
  }
  .hero-title {
    animation-delay: 190ms;
  }
  .hero-chips {
    animation-delay: 320ms;
  }
  .hero-figure img {
    animation: hero-figure-reveal 1050ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
    will-change: transform, opacity;
  }
}

@keyframes hero-copy-reveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-figure-reveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hero-tagline {
  margin-top: clamp(14px, 1.8vw, 22px);
  max-width: 48ch;
  font-size: 13px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.45;
  letter-spacing: 0.16em;
  word-spacing: 0.04em;
  font-style: normal;
}

.hero-image {
  position: relative;
  width: 100%;
  align-self: stretch;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 55%, #000 45%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0.4) 80%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 80% at 70% 55%, #000 45%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0.4) 80%, transparent 100%);
}

/* Hero figure — lawyer photo anchored to the bottom-right of the hero.
   A aura é um halo radial seguindo a silhueta da advogada, com preenchimento
   branco que se espalha para fora — destaca o sujeito do fundo cinza. */
.hero-figure { display: none; }
.hero-figure::before {
  content: "";
  position: absolute;
  inset: -12% -28% -4%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 70% at 50% 58%,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 253, 244, 0.55) 32%,
      rgba(253, 246, 226, 0.28) 55%,
      rgba(248, 235, 210, 0) 78%);
  filter: blur(28px);
}

/* Aura pulsante — em todas as versões (mobile, tablet e desktop). A escala
   anima a partir do centro, sem mexer no translate do .hero-figure (pai). */
.hero-figure::before,
.hero-figure::after {
  animation: aura-pulse 4.5s ease-in-out infinite;
  transform-origin: center 56%;
}
@keyframes aura-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-figure::before,
  .hero-figure::after { animation: none; }
}

@media (min-width: 880px) {
  .hero-tagline-bar {
    height: 104px;
  }
  .hero .container {
    grid-template-columns: 1fr;
    min-height: 520px;
  }
  .hero-copy {
    max-width: 560px;
    margin-inline: 0;
    margin-left: clamp(96px, 9.5vw, 140px);
  }
  .hero-logo {
    margin-left: -8px;
  }
  .hero-chips {
    margin-left: -8px;
  }
  .hero-title {
    margin-left: 36px;
  }
  .hero-figure {
    display: block;
    position: absolute;
    right: clamp(88px, 9vw, 140px);
    top: clamp(48px, 6vw, 80px);
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    transform: translate3d(0, var(--fig-y, 0px), 0);
    will-change: transform;
    isolation: isolate;
    overflow: visible;
  }
  .hero-figure img {
    display: block;
    position: relative;
    z-index: 1;
    height: 100%; /* preenche de top a bottom, independente da altura real do hero */
    width: auto;
    max-width: none;
    filter:
      saturate(0.82) sepia(0.16) contrast(1.02) brightness(1.02);
  }
  /* Aura desktop/tablet — mesma intensidade do mobile: halo branco forte,
     curto alcance, queda rápida; com 2ª camada de flare rente à silhueta. */
  .hero-figure::before {
    inset: -8% -22% -4%;
    background:
      radial-gradient(ellipse 50% 68% at 50% 56%,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(255, 252, 240, 0.85) 18%,
        rgba(253, 246, 226, 0.55) 40%,
        rgba(250, 240, 218, 0.22) 62%,
        rgba(248, 235, 210, 0) 80%);
    filter: blur(16px);
  }
  .hero-figure::after {
    content: "";
    position: absolute;
    inset: 4% 8% 6%;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 40% 52% at 50% 52%,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 252, 240, 0.30) 40%,
        rgba(255, 255, 255, 0) 74%);
    filter: blur(12px);
  }
}

@media (max-width: 879px) {
  .hero {
    align-items: flex-start;
    height: calc(100svh - 87px); /* 88px da barra − 1px de overlap */
  }
  .hero-tagline-bar {
    height: 88px;
  }
  .hero .container {
    z-index: 2;
    padding-block: clamp(38px, 9svh, 82px) 40px;
  }
  .hero-copy {
    margin-inline: auto;
  }
  .hero-chips {
    display: none;
  }
  .hero::before {
    /* Mobile: monograma de fundo deslocado para baixo e para a esquerda. */
    -webkit-mask-position: 43% 58%;
    mask-position: 43% 58%;
    opacity: 0.18;
  }
  .hero-title {
    max-width: none;
  }
  .hero-figure {
    display: block;
    position: absolute;
    left: 50%;
    right: auto;
    bottom: -6.5svh;
    height: min(58svh, 560px);
    opacity: 1;
    pointer-events: none;
    z-index: 1;
    transform: translateX(-50%);
    overflow: visible;
  }
  /* Aura mobile — halo branco INTENSO seguindo a silhueta.
     Curto alcance, alta opacidade perto da silhueta, queda rápida. */
  .hero-figure::before {
    content: "";
    position: absolute;
    inset: -6% -18% -4%;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 44% 60% at 50% 56%,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(255, 252, 240, 0.85) 18%,
        rgba(253, 246, 226, 0.55) 38%,
        rgba(250, 240, 218, 0.22) 60%,
        rgba(248, 235, 210, 0) 78%);
    filter: blur(14px);
  }
  /* 2ª camada — flare adicional rente à silhueta, ainda mais intenso */
  .hero-figure::after {
    content: "";
    position: absolute;
    inset: 4% 10% 6%;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 38% 50% at 50% 52%,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 252, 240, 0.30) 38%,
        rgba(255, 255, 255, 0) 72%);
    filter: blur(10px);
  }
  .hero-figure img {
    display: block;
    position: relative;
    z-index: 1;
    height: 100%;
    width: auto;
    max-width: none;
    filter:
      saturate(0.82) sepia(0.16) contrast(1.02) brightness(1.02);
  }
  .hero-scroll {
    z-index: 5;
  }
  .tagline-item {
    font-size: clamp(11px, 2.85vw, 12px);
    letter-spacing: clamp(0.12em, 0.9vw, 0.18em);
    line-height: 1.45;
  }
  .tagline-rotator,
  .tagline-item {
    min-height: 4.25em;
  }
}

@media (max-width: 420px) {
  .hero-tagline-bar {
    height: 84px;
  }
  .hero {
    height: calc(100svh - 83px); /* 84px da barra − 1px de overlap */
  }
  .hero .container {
    padding-block-start: clamp(38px, 9svh, 74px);
  }
  .hero-copy {
    margin-inline: auto;
  }
  .hero-logo {
    width: 90px;
    margin-bottom: 16px;
    margin-left: -8px;
  }
  .hero-title {
    font-size: clamp(30px, 8.2vw, 32px);
    margin-left: 8px;
  }
  .hero-chips {
    display: none;
  }
  .hero-figure {
    left: 50%;
    right: auto;
    bottom: -5svh;
    height: min(46svh, 370px);
    opacity: 1;
  }
  .tagline-item {
    font-size: 10.8px;
    letter-spacing: 0.12em;
    line-height: 1.42;
  }
}

@media (max-width: 420px) and (max-height: 720px) {
  .hero .container {
    padding-block-start: clamp(26px, 4svh, 34px);
  }
  .hero-logo {
    width: 80px;
    margin-bottom: 12px;
    margin-left: -8px;
  }
  .hero-title {
    font-size: 28.5px;
    margin-left: 8px;
  }
  .hero-figure {
    bottom: -3.5svh;
    height: min(42svh, 284px);
  }
}

@media (min-width: 640px) and (max-width: 879px) {
  .hero-figure {
    left: 50%;
    right: auto;
    bottom: -5svh;
    height: min(56svh, 560px);
    opacity: 1;
  }
  .hero-title {
    max-width: 12em;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 879px) {
    .hero-figure {
      bottom: 0;
      isolation: isolate;
      -webkit-transform: translateX(-50%) translateZ(0);
              transform: translateX(-50%) translateZ(0);
    }

    .hero-figure::before,
    .hero-figure::after {
      content: "";
      position: absolute;
      pointer-events: none;
      z-index: 0;
    }

    .hero-figure::before {
      inset: -16% -34% -4%;
      background:
        radial-gradient(ellipse 58% 76% at 50% 58%,
          rgba(255, 253, 244, 0.84) 0%,
          rgba(253, 246, 226, 0.52) 38%,
          rgba(251, 241, 218, 0.28) 60%,
          rgba(248, 235, 210, 0) 78%);
      filter: blur(18px);
    }

    .hero-figure::after {
      inset: -24% -52% -8%;
      background:
        radial-gradient(ellipse 62% 78% at 50% 62%,
          rgba(253, 246, 226, 0.36) 0%,
          rgba(251, 241, 218, 0.18) 46%,
          rgba(246, 232, 205, 0) 76%);
      filter: blur(34px);
    }

    .hero-figure img {
      z-index: 1;
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      filter:
        saturate(0.82) sepia(0.16) contrast(1.02) brightness(1.02);
    }
  }
}

@media (min-width: 880px) and (max-height: 820px) {
  .hero-logo {
    width: clamp(98px, 8.5vw, 118px);
    margin-bottom: 18px;
  }
  .hero-title {
    font-size: clamp(38px, 3.55vw, 48px);
    max-width: 390px;
  }
  .hero-chips {
    margin-top: 24px;
  }
  .hero-figure {
    top: 56px;
    right: clamp(16px, 5vw, 92px);
  }
}

@media (min-width: 1120px) and (max-width: 1540px) and (max-height: 820px) {
  .hero-copy {
    margin-left: clamp(156px, 13vw, 184px);
  }
  .hero-figure {
    right: clamp(196px, 15vw, 232px);
  }
  /* Seção 6 — lead em uma linha no desktop crítico para ganhar respiro */
  .service--brown .section-lead {
    white-space: nowrap;
    max-width: max-content;
    margin-inline: auto;
  }
}

@media (min-width: 880px) and (max-width: 1100px) {
  .hero {
    height: calc(100svh - 95px); /* 96px da barra − 1px de overlap */
  }
  .hero-tagline-bar {
    height: 96px;
  }
  .hero-copy {
    margin-left: clamp(72px, 9vw, 96px);
    transform: translateY(-28px);
  }
  .hero-chips {
    display: none;
  }
  .hero-figure {
    right: clamp(-96px, -8vw, -72px);
    top: 64px;
    bottom: -24px;
    z-index: 1;
  }
  .hero-figure img {
    position: relative;
    filter:
      saturate(0.82) sepia(0.16) contrast(1.02) brightness(1.02);
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 880px) {
  .hero-figure { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo,
  .hero-title,
  .hero-chips,
  .hero-figure img {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* Hero scroll indicator — bottom-center arrow */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3vw, 32px);
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: transparent;
  cursor: pointer;
  z-index: 5;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
  animation: hero-scroll-bob 2.2s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent; /* sem caixa cinza no toque mobile */
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}
.hero-scroll:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.hero-scroll:hover { opacity: 1; }
.hero-scroll svg { width: 44px; height: 44px; stroke-width: 1.3; }
.hero-scroll-chip {
  display: none;
}

@media (min-width: 1101px) and (min-height: 821px) {
  .hero-scroll {
    color: var(--primary-dark);
  }
}

@media (max-width: 1100px) {
  .hero-scroll {
    width: auto;
    height: auto;
    min-width: 64px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  /* Em desktop pequeno/tablet a seta cai sobre a roupa marrom da advogada:
     vira branca para garantir contraste. */
  .hero-scroll svg {
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(47, 42, 38, 0.28));
  }
  .hero-scroll-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #fff;
    background: var(--primary);
    white-space: nowrap;
  }
}

@keyframes hero-scroll-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll { animation: none; }
}

/* ---------- "Como posso te ajudar" — brown band, full screen ---------- */
.help {
  background: var(--primary-dark);
  color: var(--on-dark);
  min-height: calc(100dvh - 80px);
  display: block;
  padding-block: 0;
}
.help .container {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  width: 100%;
}
.help-panel {
  background: var(--primary-dark);
}
.help-panel--cards {
  background: var(--primary-dark);
}
.help-intro,
.help-cards-wrap {
  padding-block: clamp(56px, 8vw, 96px);
}
.help-eyebrow { color: var(--on-dark); opacity: 0.9; }
.help-title {
  font-size: clamp(28px, 4vw, 42px);
  color: #fffaf2;
}
.help-body {
  color: var(--on-dark-muted);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.75;
  max-width: 70ch;
}
.help-body p + p { margin-top: 14px; }
.help-body mark {
  background: transparent;
  color: #fff;
  font-weight: 700;
  border-bottom: 1px dotted rgba(255,255,255,0.45);
  padding-bottom: 1px;
}

/* Highlights em fundo claro (seções de serviço) */
.service .section-lead mark,
.service .card__list mark,
.service .service-foot mark,
.service .service-header mark {
  background: transparent;
  color: var(--primary-dark);
  font-weight: 700;
  border-bottom: 1px dotted rgba(139, 100, 75, 0.45);
  padding-bottom: 1px;
}
/* Em variantes de serviço com fundo marrom escuro */
.service--brown .section-lead mark,
.service--brown .card__list mark,
.service--brown .service-foot mark,
.service--brown .service-header mark {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.45);
}

/* Card tag — pequeno subtítulo em caixa alta no topo de cada card */
.card__tag {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  margin: -2px 0 -4px;
  align-self: flex-start;
}
.card--brown .card__tag { color: rgba(255,255,255,0.78); }

/* Help highlights — 4 cards reforçando os pontos-chave */
.help-highlights {
  margin-top: clamp(20px, 3vw, 40px);
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px; /* mesmo gap dos .cards das demais seções */
}
@media (min-width: 560px) {
  .help-highlights { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .help-highlights { grid-template-columns: repeat(4, 1fr); gap: 22px; }
}
.help-card {
  background: var(--primary-dark);
  border: 1px solid rgba(244, 236, 224, 0.28);
  border-radius: var(--r-card);
  padding: 48px 24px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  color: var(--on-dark);
}
.help-card__icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: grid;
  place-items: center;
  color: var(--on-dark);
  align-self: center;
}
.help-card__icon svg { width: 26px; height: 26px; }
.help-card p {
  color: var(--on-dark-muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}
.help-card p strong {
  color: #fff;
  font-weight: 700;
}
.help-checklist {
  margin-top: clamp(26px, 4vw, 42px);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 18px;
}
.help-checklist p {
  color: var(--on-dark-muted);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.55;
  max-width: none;
  margin: 0;
  white-space: nowrap;
}
.help-checklist__btn {
  background: #d7c6ad; /* tom claro que deixa o shimmer visível */
  border-color: #d7c6ad;
  color: #fff;
}
.help-checklist__btn:hover {
  background: #cbb795;
  border-color: #cbb795;
  color: #fff;
}
.help-checklist__btn svg {
  width: 19px;
  height: 19px;
  flex: none;
}
@media (max-width: 560px) {
  .help-checklist p {
    white-space: normal;
    max-width: 34ch;
  }
}

@media (min-width: 1120px) {
  .help {
    min-height: 0;
    padding-block: 0;
  }
  .help-panel {
    min-height: calc(100dvh - 104px);
    scroll-snap-align: start;
  }
  .help-panel--intro {
    display: grid;
  }
  .help-intro {
    align-self: stretch;
    display: grid;
    align-content: center;
    padding-block: clamp(48px, 7vh, 72px);
    max-width: 980px;
  }
  .help-body {
    max-width: 78ch;
  }
  .help-panel--cards {
    display: grid;
    align-items: center;
    padding-block: clamp(38px, 6vh, 64px);
  }
  .help-cards-wrap {
    padding-block: 0;
    gap: 0;
  }
  .help-highlights {
    margin-top: 0;
  }
  .help-checklist {
    margin-top: clamp(24px, 4vh, 34px);
  }
}

/* ---------- Timeline ---------- */
.timeline {
  background: var(--bg-soft);
}
.tl-note {
  color: var(--text-muted);
  font-size: 15px;
  margin-top: 10px;
  max-width: 60ch;
}
.tl-note.center { margin-inline: auto; text-align: center; }
.timeline .tl-note mark {
  background: transparent;
  color: var(--primary-dark);
  font-weight: 700;
  border-bottom: 1px dotted rgba(139, 100, 75, 0.45);
}

.tl-mobile {
  margin-top: 48px;
  position: relative;
  padding-left: 32px;
}
.tl-mobile::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border-soft);
}
.tl-step {
  position: relative;
  padding: 0 0 44px 24px; /* respiro maior entre etapas no mobile */
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.tl-step:last-child { padding-bottom: 0; }
.tl-step__marker {
  position: absolute;
  left: -32px;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  padding-top: 3px;
  font-family: var(--font-numbers); /* lining figures uniformes para círculos numerados */
  font-style: italic;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  border: 6px solid var(--bg-soft);
  outline: 1px solid var(--border-soft);
}
.tl-step__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.tl-step__icon {
  width: 30px;
  height: 30px;
  color: var(--primary-dark);
  flex: none;
}
.tl-step__title {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-dark);
  line-height: 1.35;
}
.tl-step__desc {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}

.tl-desktop { display: none; }

@media (min-width: 960px) {
  .tl-mobile { display: none; }
  .tl-desktop {
    display: block;
    margin-top: 64px;
    position: relative;
    padding-block: 24px; /* folga equilibrada para cards acima e abaixo do rail */
  }
  .tl-rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    min-height: 360px;
  }
  .tl-rail::before {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    top: 50%;
    height: 1px;
    background: var(--border-soft);
  }
  .tl-node {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-inline: 8px;
  }
  .tl-node__dot {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: grid;
    place-items: center;
    padding-top: 3px;
    font-family: var(--font-numbers); /* lining figures uniformes para círculos numerados */
    font-style: italic;
    font-weight: 600;
    font-size: 17px;
    line-height: 1;
    border: 8px solid var(--bg-soft);
    position: relative;
    z-index: 2;
  }
  .tl-node__card {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(176px, 118%, 212px);
    text-align: center;
    background: #fff;
    border: 1px solid var(--border-softer);
    border-radius: var(--r-card);
    padding: 14px 18px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .tl-node__card:hover {
    border-color: var(--primary);
    box-shadow: 0 14px 32px -18px rgba(47, 42, 38, 0.32);
    transform: translateX(-50%) translateY(-2px);
  }
  .tl-node:nth-child(odd) .tl-node__card:hover { transform: translateX(-50%) translateY(-4px); }
  .tl-node:nth-child(even) .tl-node__card:hover { transform: translateX(-50%) translateY(2px); }
  .tl-node:nth-child(odd) .tl-node__card { bottom: calc(50% + 28px); }
  .tl-node:nth-child(even) .tl-node__card { top: calc(50% + 28px); }
  .tl-node__connector {
    position: absolute;
    left: 50%;
    width: 1px;
    background: var(--border-soft);
    z-index: 1;
  }
  .tl-node:nth-child(odd) .tl-node__connector { bottom: calc(50% + 23px); height: 8px; }
  .tl-node:nth-child(even) .tl-node__connector { top: calc(50% + 23px); height: 8px; }
  .tl-node__icon {
    width: 28px;
    height: 28px;
    color: var(--primary-dark);
    margin-inline: auto;
    margin-bottom: 5px;
  }
  .tl-node__title {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary-dark);
    line-height: 1.35;
  }
  .tl-node__desc {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
    margin-top: 5px;
  }
}

/* ---------- Service sections (cards) ---------- */
.service {
  background: var(--bg);
}
.service--soft { background: var(--bg-soft); }
.service--warm { background: var(--bg-warm); }

.service-header { text-align: center; max-width: 760px; margin-inline: auto; }
.service-header .eyebrow { margin-bottom: 6px; }
.service-header .section-title { text-align: center; }

.cards {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid;
  gap: 22px;
}
@media (min-width: 720px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: #fff;
  border: 1px solid var(--border-softer);
  border-radius: var(--r-card);
  padding: 32px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Pressionar/segurar um card no mobile não deve selecionar texto nem abrir
   o menu de copiar/“callout” do iOS. */
.card,
.help-card,
.tl-node__card,
.tl-step,
.reviewer-chip,
.testimonial {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Microinteração discreta — em DUAS camadas para não "grudar" no touch:
   - :hover apenas em dispositivos com ponteiro real (hover: hover);
   - :active em todos — dispara só ENQUANTO o card está pressionado. */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -18px rgba(47, 42, 38, 0.25);
    border-color: var(--border-soft);
  }
  .card--brown:hover,
  .help-card:hover {
    background: #9d775e;
    border-color: rgba(244, 236, 224, 0.48);
    box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
  }
}
.card:active {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -18px rgba(47, 42, 38, 0.25);
  border-color: var(--border-soft);
}
/* Em fundos marrons o destaque usa um marrom mais CLARO, mantendo contraste
   com os ícones (moldura redonda branca translúcida). */
.card--brown:active,
.help-card:active {
  background: #9d775e;
  border-color: rgba(244, 236, 224, 0.48);
  box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}
.help-card { transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.card:focus-within {
  border-color: var(--primary);
}
.card--featured {
  border-top: 2px solid var(--primary);
}
.card--edge {
  border-bottom: 2px solid var(--primary);
}
.card--brown {
  background: var(--primary-dark);
  color: var(--on-dark);
  border-color: rgba(244, 236, 224, 0.28); /* mesmo peso visual das help-card */
  padding: 40px 28px 40px;
  gap: 20px;
  justify-content: center;
}
/* Altura uniforme só no desktop (cards lado a lado); no mobile o conteúdo dirige */
@media (min-width: 880px) {
  .card--brown { min-height: 364px; }
}
.card__icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--bg-warm);
  display: grid;
  place-items: center;
  color: var(--primary-dark);
}
.card--brown .card__icon {
  background: rgba(255,255,255,0.08);
  color: var(--on-dark);
}
.card__icon svg { width: 26px; height: 26px; }
.card__title {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  color: var(--text);
}
.card--brown .card__title { color: #fff; }
.card__support {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: -8px;
}
.card--brown .card__support { color: var(--on-dark-muted); }
.card__list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: grid;
  gap: 10px;
}
.card__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
}
.card--brown .card__list li { color: var(--on-dark-muted); }
.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 8px;
  height: 8px;
  background-color: var(--primary);
  transform: rotate(45deg);
  opacity: 0.9;
}
.card--brown .card__list li::before {
  background-color: rgba(255,255,255,0.72);
  opacity: 1;
}

.service-foot {
  margin-top: clamp(28px, 4vw, 44px);
  text-align: center;
}
.service-foot p {
  color: var(--text-muted);
  font-size: 15px;
  max-width: 60ch;
  margin: 0 auto 20px;
}
.service-foot .btn { min-width: var(--btn-wide); }

.service--brown {
  background: var(--primary-dark);
}
.service--brown .section-title,
.service--brown .service-header .eyebrow,
.service--brown .service-foot p { color: #fffaf2; }
.service--brown .service-foot p { color: var(--on-dark-muted); }
.service--brown .section-lead { color: var(--on-dark-muted); }

/* Trecho de título com cor de destaque (ex.: Planejamento Patrimonial) */
.title-accent { color: var(--primary-dark); }

/* Observações entre parênteses na lista de especializações */
.about-list em { opacity: 0.8; }

/* ---------- About ---------- */
.about {
  background: var(--primary-dark);
  color: var(--on-dark);
}
.about .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.about-copy h2 {
  color: #fffaf2;
  font-size: clamp(28px, 4vw, 42px);
}
.about-firm {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  color: #fff;
  margin-top: 6px;
  margin-bottom: 18px;
}
.about-copy p {
  color: var(--on-dark-muted);
  font-size: 14.5px;
  line-height: 1.85; /* texto longo: respiro entre linhas maior */
}
.about-copy p + p { margin-top: 18px; }
.about-copy strong { color: #fff; font-weight: 700; }

.about-block-title {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;           /* títulos brancos para hierarquia clara */
  margin: 0 0 14px;
  opacity: 1;
}
/* Espaçamento maior e consistente entre os 6 blocos do Sobre Mim */
.about-block + .about-block { margin-top: clamp(28px, 3.5vw, 40px); }
.about-block--name h2 { margin-bottom: 6px; }
.about-block--name .about-firm { margin: 0; }
/* Desktop full-screen: o bloco "Atendimento" sai para o conteúdo caber
   melhor; mobile/tablet mantêm com respiro extra entre blocos. */
@media (min-width: 1101px) {
  .about-block--availability { display: none; }
}
@media (max-width: 1100px) {
  .about-block + .about-block { margin-top: clamp(34px, 5vw, 48px); }
}
.about-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.about-list { gap: 14px; } /* mais respiro entre os tópicos */
.about-list li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  color: var(--on-dark-muted);
  line-height: 1.65;
}
/* Marcador refinado: losango aberto, ecoando o monograma R&S */
.about-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255, 250, 242, 0.78);
  background: transparent;
  transform: rotate(45deg);
}

.about-mission {
  padding: 18px 20px;
  border-left: 2px solid rgba(255,255,255,0.45);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: #fff;
  line-height: 1.45;
  margin: 0;
}

.about-image {
  position: relative;
}
.about-image img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 18px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* Efeito de profundidade — dois blocos arredondados atrás da imagem
   (cores herdadas do antigo efeito de borda: creme sólido e creme
   translúcido), levemente mais estreitos e deslocados para baixo,
   com flutuação sutil alternada. Substitui a borda inferior anterior. */
.about-image::before,
.about-image::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 18px;
  z-index: 0;
  pointer-events: none;
}
.about-image::before {
  left: 4%;
  right: 4%;
  background: #fffaf2;
  transform: translate(0, 12px);
  animation: about-float-a 7s ease-in-out infinite;
}
.about-image::after {
  left: 9%;
  right: 9%;
  background: rgba(255, 250, 242, 0.42);
  transform: translate(0, 24px);
  animation: about-float-b 9.5s ease-in-out -4s infinite;
}
/* Flutuação em X e Y, com cada elemento (cards de fundo, imagem e chip)
   no seu próprio timing/offset — movimento dessincronizado. */
@keyframes about-float-a {
  0%, 100% { transform: translate(0, 12px); }
  33%      { transform: translate(-7px, 16px); }
  66%      { transform: translate(5px, 9px); }
}
@keyframes about-float-b {
  0%, 100% { transform: translate(0, 24px); }
  40%      { transform: translate(6px, 19px); }
  72%      { transform: translate(-5px, 28px); }
}
.about-image img {
  animation: about-float-img 8s ease-in-out -2.5s infinite;
}
@keyframes about-float-img {
  0%, 100% { transform: translate(0, 0); }
  35%      { transform: translate(-5px, -7px); }
  68%      { transform: translate(4px, 5px); }
}
@media (prefers-reduced-motion: reduce) {
  .about-image::before,
  .about-image::after,
  .about-image img,
  .about-badge { animation: none; }
}
/* Chip "+10 anos" — fonte dos títulos (Playfair itálico), estático. */
.about-badge {
  position: absolute;
  left: -22px;          /* levemente mais para fora */
  bottom: 48px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 35px;
  background: #bca392;
  color: #fff;
  border: 1px solid #fff;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  padding: 0 18px;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
}
.about-badge::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  background: linear-gradient(110deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: translateX(-180%) skewX(-12deg);
  pointer-events: none;
  z-index: 1;
  opacity: 0.9;
  animation: btn-shimmer 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.about-cta { margin-top: 32px; }

@media (min-width: 880px) {
  .about .container { grid-template-columns: 1fr 0.85fr; }
  .about-image { order: 2; }
}

/* ---------- Reviews ---------- */
.reviews { background: var(--bg-soft); }
.reviews-header { text-align: center; }
.reviews-summary {
  margin: 28px auto 0;
  width: min(100%, 460px);
  max-width: 460px;
  background: #fff;
  border: 1px solid var(--border-softer);
  border-radius: var(--r-card);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 18px;
  align-items: center;
  justify-content: center;
}
.reviews-summary > div {
  transform: translateX(-8px);
}
.rs-rating {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  color: var(--text);
}
.rs-stars {
  display: inline-flex;
  gap: 2px;
  color: #e6a93b;
  margin-top: 6px;
}
.rs-stars svg { width: 16px; height: 16px; }
.rs-meta {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.45;
  width: 178px;
}
.rs-meta strong {
  font-weight: 700;
  color: var(--primary-dark);
  letter-spacing: 0.06em;
  font-size: 12px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
.rs-google {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.rs-google svg { width: 14px; height: 14px; }
a.rs-google { transition: color 0.2s ease; }
a.rs-google:hover { color: var(--primary-dark); text-decoration: underline; }

.reviewers {
  margin: 28px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 10px;
  max-width: 760px;
  padding: 0; /* o .container já dá as margens — padding duplo desequilibrava */
  list-style: none;
  text-align: center;
}
.reviewer-chip {
  background: #fff;
  border: 1px solid var(--border-softer);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.reviewer-chip svg { width: 11px; height: 11px; color: #e6a93b; }

.testimonial {
  margin: 40px auto 0;
  max-width: 640px;
  background: #fff;
  border: 1px solid var(--border-softer);
  border-radius: var(--r-card);
  padding: 28px 30px 26px;
  text-align: left;
  position: relative;
}
.testimonial::before {
  content: "";
  width: 30px;
  height: 30px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M14 16c0-1.886 0-2.828.586-3.414S16.114 12 18 12s2.828 0 3.414.586S22 14.114 22 16s0 2.828-.586 3.414S19.886 20 18 20s-2.828 0-3.414-.586S14 17.886 14 16Z'/%3E%3Cpath stroke-linecap='round' d='M14 16v-4.137C14 8.196 16.516 5.086 20 4'/%3E%3Cpath d='M2 16c0-1.886 0-2.828.586-3.414S4.114 12 6 12s2.828 0 3.414.586S10 14.114 10 16s0 2.828-.586 3.414S7.886 20 6 20s-2.828 0-3.414-.586S2 17.886 2 16Z'/%3E%3Cpath stroke-linecap='round' d='M2 16v-4.137C2 8.196 4.516 5.086 8 4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M14 16c0-1.886 0-2.828.586-3.414S16.114 12 18 12s2.828 0 3.414.586S22 14.114 22 16s0 2.828-.586 3.414S19.886 20 18 20s-2.828 0-3.414-.586S14 17.886 14 16Z'/%3E%3Cpath stroke-linecap='round' d='M14 16v-4.137C14 8.196 16.516 5.086 20 4'/%3E%3Cpath d='M2 16c0-1.886 0-2.828.586-3.414S4.114 12 6 12s2.828 0 3.414.586S10 14.114 10 16s0 2.828-.586 3.414S7.886 20 6 20s-2.828 0-3.414-.586S2 17.886 2 16Z'/%3E%3Cpath stroke-linecap='round' d='M2 16v-4.137C2 8.196 4.516 5.086 8 4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  color: var(--primary);
  opacity: 0.35;
  position: absolute;
  top: 18px;
  left: 22px;
}
.testimonial p {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text);
  padding-left: 36px;
}
.testimonial .t-stars {
  display: inline-flex;
  gap: 2px;
  color: #e6a93b;
  margin-top: 14px;
  margin-left: 36px;
}
.testimonial .t-stars svg { width: 14px; height: 14px; }
/* Mobile: recuo da citação menor — o padding de 36px lia como
   conteúdo "empurrado para a direita" em telas estreitas. */
@media (max-width: 879px) {
  .testimonial { padding: 24px 22px 22px; }
  .testimonial::before { top: 18px; left: 14px; width: 26px; height: 26px; }
  .testimonial p { padding-left: 24px; }
  .testimonial .t-stars { margin-left: 24px; }
  .t-source { margin-left: 24px; }
}

/* Depoimentos — pista horizontal com snap; arrasta no touch, auto-rotate via JS.
   Quando há um único depoimento, ele ocupa toda a largura e o rotator não dispara. */
.testimonials {
  margin: 40px auto 0;
  max-width: 720px;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 16px;
  padding: 4px 0; /* simétrico — sem deslocamento lateral percebido */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.testimonials::-webkit-scrollbar { display: none; }
.testimonials .testimonial {
  margin: 0;
  flex: 0 0 100%;
  scroll-snap-align: center;
  min-width: 0;
}
.t-source {
  margin-top: 10px;
  margin-left: 36px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.reviews-google-link {
  text-align: center;
  margin-top: 22px;
  font-size: 14px;
}
.reviews-google-link a {
  color: var(--primary-dark);
  font-weight: 500;
  border-bottom: 1px dotted rgba(139, 100, 75, 0.45);
  padding-bottom: 1px;
  transition: border-color 0.2s ease;
}
.reviews-google-link a:hover { border-bottom-style: solid; }

.reviews-foot { text-align: center; margin-top: 40px; }

/* ---------- FAQ ---------- */
.faq { background: var(--bg); }
.faq-list {
  margin: clamp(28px, 5vw, 48px) auto 0;
  max-width: 760px;
  display: grid;
  gap: 12px;
}
details.qa {
  background: #fff;
  border: 1px solid var(--border-softer);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color 0.2s ease;
}
details.qa:hover,
details.qa:has(summary:hover),
details.qa[open] {
  border-color: #8b644b;
}
details.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 500; /* peso visual mais leve, como pedido */
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
  min-height: 48px;
  transition: background-color 0.2s ease;
}
details.qa[open] summary {
  background: #ece6dd;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa .qa-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  display: grid;
  place-items: center;
  color: var(--primary-dark);
  transition: transform 0.25s ease, background 0.25s ease;
}
details.qa[open] .qa-icon {
  background: var(--primary-dark);
  color: #fff;
  transform: rotate(45deg);
}
details.qa .qa-icon svg { width: 12px; height: 12px; }
details.qa .qa-body {
  padding: 10px 22px 22px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.65;
  max-width: 64ch;
}

/* ---------- Contact ---------- */
.contact { background: var(--bg-soft); }
.contact .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.contact-list {
  margin-top: 28px;
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
}
.contact-list a, .contact-list > li > span {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--border-softer);
  border-radius: var(--r-card);
  color: var(--text);
  font-size: 14.5px;
  min-height: 48px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.contact-list a:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}
.contact-list .ci-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-warm);
  display: grid;
  place-items: center;
  color: var(--primary-dark);
  flex: none;
}
.contact-list .ci-icon svg { width: 22px; height: 22px; }
/* WhatsApp usa o glifo thin fornecido, mantendo proporção do card. */
.contact-list .ci-icon .wa-icon { width: 21px; height: 21px; }
/* E-mails longos não estouram o card em telas estreitas (ex.: 360px) */
.contact-list a[href^="mailto"] { overflow-wrap: anywhere; }

.contact-list .ci-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
  font-weight: 700;
}

.contact-cta { margin-top: 24px; }

/* Compartilhar página — subtítulo clicável (texto + ícone arrow-up-right) */
.share-link {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  background: none;
  border: none;
  color: var(--primary-dark);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: 1.3;
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.share-link:hover { opacity: 0.78; }
.share-link__icon {
  display: inline-flex;
  align-items: center;
}
.share-link__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.share-link .share-ico-done { display: none; }
/* Feedback de "Link Copiado" */
.share-link.is-copied .share-ico-default { display: none; }
.share-link.is-copied .share-ico-done { display: block; }

.contact-monogram {
  display: none;
  justify-self: center;
  width: min(280px, 60%);
}
.contact-monogram .logo-mark {
  width: 100%;
  --logo-color: var(--primary);
}
@media (min-width: 880px) {
  .contact .container { grid-template-columns: 1.2fr 1fr; }
  .contact-monogram { display: block; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--primary-deeper);
  color: var(--on-dark);
  padding: 72px 0 96px;
}
@media (max-width: 879px) {
  .site-footer {
    padding-top: 96px;
    padding-bottom: 112px; /* respiro extra após o copyright */
  }
}
.site-footer .container {
  display: grid;
  gap: 28px;
  text-align: center;
}
.site-footer .footer-logo { margin-inline: auto; }
.site-footer .footer-logo .logo-mark {
  width: 96px;
  --logo-color: #fff;
}
@media (max-width: 879px) {
  .site-footer .footer-logo .logo-mark { width: 128px; } /* logo maior no mobile */
}
.footer-name {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: #fff;
  margin-top: 14px;
}
.footer-name small {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-top: 6px;
}
.footer-copy {
  font-size: 13px;
  color: var(--on-dark-muted);
  max-width: 56ch;
  margin-inline: auto;
  line-height: 1.7;
}
.footer-rights {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(244, 236, 224, 0.55);
  text-transform: uppercase;
  line-height: 1.8;
}
.footer-rights span { display: inline; }
@media (max-width: 1023px) {
  /* mobile e tablet: copyright em duas linhas */
  .footer-rights br { display: inline; }
  .footer-rights span { display: block; }
}
@media (min-width: 1024px) {
  .footer-rights br { display: none; }
  .footer-rights span::before { content: " · "; }
}

/* Barra sticky de CTA mobile foi REMOVIDA — no mobile usamos o FAB circular
   (.fab-wa) ancorado no canto inferior direito, igual ao desktop. */
.sticky-cta { display: none !important; }

/* Floating WhatsApp */
.fab-wa {
  display: grid;
  place-items: center;
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #0d8f3d;
  color: #fff;
  z-index: 60;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.25s ease, transform 0.2s ease;
}
@media (max-width: 1100px) {
  .fab-wa {
    opacity: 0;
    pointer-events: none;
  }
  body.has-passed-hero .fab-wa {
    opacity: 1;
    pointer-events: auto;
  }
}
.fab-wa:hover { transform: translateY(-2px); }
.fab-wa svg { width: 26px; height: 26px; }
/* Mobile — FAB menor, discreto, ancorado no canto inferior direito.
   Só aparece depois do hero (.has-passed-hero), para não competir com o título. */
@media (max-width: 879px) {
  .fab-wa {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
  }
  .fab-wa svg { width: 24px; height: 24px; }
}

/* ---------- Timeline modal (desktop) ---------- */
.tl-modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(560px, 92vw);
  width: 100%;
}
.tl-modal::backdrop {
  background: rgba(47, 42, 38, 0.55);
  backdrop-filter: blur(4px);
}
.tl-modal__card {
  background: #fff;
  border-radius: var(--r-card);
  padding: 32px 32px 28px;
  position: relative;
  border-top: 3px solid var(--primary);
  /* Altura padrão única — os popups das 7 etapas ficam consistentes
     mesmo com descrições de tamanhos diferentes. */
  min-height: 240px;
  display: flex;
  flex-direction: column;
}
.tl-modal__desc { flex: 1 1 auto; }
.tl-modal__step {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}
.tl-modal__title {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  margin: 8px 0 14px;
  line-height: 1.3;
}
.tl-modal__desc {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.65;
}
.tl-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-softer);
  background: #fff;
  color: var(--text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tl-modal__close:hover { color: var(--primary); border-color: var(--primary); }
.tl-modal__close svg { width: 16px; height: 16px; }

/* ---------- Testimonials rotator (dots indicator) ---------- */
.testimonials-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.testimonials-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(139, 100, 75, 0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.testimonials-dot.is-active {
  background: var(--primary);
  transform: scale(1.15);
}

/* ---------- Section arrows mobile/tablet (criadas por script.js) ----------
   Sem moldura — mesma linguagem da seta do Hero (svg 44px, stroke fino),
   centralizada em relação à TELA (left 50% + translateX compensa qualquer
   assimetria de padding do container). Aparece até 1100px (mobile + tablet);
   desktop não tem setas. */
.section-arrow {
  display: none;
}
@media (max-width: 1100px) {
  .section-arrow {
    display: block;
    width: fit-content;
    /* centralizado de forma robusta via margin auto (independente do pai);
       menos respiro após a seta (margin-bottom negativo). */
    margin: 12px auto -12px;
    padding: 6px;
    background: transparent;
    border: none;
    color: var(--primary-dark);
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    animation: section-arrow-bob 2.4s ease-in-out infinite;
  }
  .section-arrow:hover, .section-arrow:active { opacity: 1; }
  .section-arrow svg { width: 42px; height: 42px; }
  /* peso do traço um pouco menor que o padrão (1.5) */
  .section-arrow svg, .section-arrow svg * { stroke-width: 1.2; }
  /* Em seções com fundo marrom escuro, seta clara */
  .service--brown .section-arrow,
  .about .section-arrow,
  .help .section-arrow {
    color: #fffaf2;
  }
  /* FAQ: fundo claro — seta em cinza discreto (mais escuro que o fundo),
     sem o destaque do marrom. */
  .faq .section-arrow {
    color: #8c8681;
  }
  /* Seta INTERNA do .help (entre painel A e painel B) */
  .section-arrow--internal {
    margin-top: 8px;
    margin-bottom: -10px;
  }
}
@keyframes section-arrow-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .section-arrow { animation: none; }
}

/* ---------- Utility ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.divider {
  width: 64px;
  height: 1px;
  background: var(--border-soft);
  margin: 0 auto;
}
/* ==========================================================
   Mobile — alturas dirigidas pelo conteúdo e respiro harmônico.
   Cards empilhados não precisam de altura igual; padding menor
   mantém a proporção sem esticar cards de pouco conteúdo.
   ========================================================== */
@media (max-width: 879px) {
  .card {
    padding: 28px 24px 30px;
    min-height: 0;
  }
  .card--brown {
    padding: 32px 24px;
    gap: 16px;
  }
  .help-card {
    padding: 32px 22px;
    gap: 20px;
    min-height: 0;
  }
  .tl-mobile { margin-top: 56px; }   /* mais respiro entre o subtítulo e a 1ª etapa */
  .timeline .tl-note { margin-top: 34px; } /* mais respiro entre a última etapa e a nota */
  .tl-step__head { margin-bottom: 6px; }
  .help-checklist { gap: 16px; }
  .service-foot p { margin-bottom: 16px; }
}

/* ==========================================================
   Borda alternada nos cards empilhados (mobile, < 720px):
   1º card → só borda inferior; 2º → superior e inferior;
   3º → só superior. Desktop mantém o padrão edge/featured/edge.
   ========================================================== */
@media (max-width: 719px) {
  .cards .card--featured {
    border-bottom: 2px solid var(--primary);
  }
  .cards .card--edge:last-child {
    border-top: 2px solid var(--primary);
    border-bottom: 1px solid var(--border-softer);
  }
}

/* Quebra de linha visível apenas no desktop */
.br-desktop { display: none; }
@media (min-width: 880px) {
  .br-desktop { display: block; }
}

/* ==========================================================
   Fullpage scroll snap — desktop only (≥ 880px)
   Seções encaixam no topo ao rolar. Mobile: scroll natural.
   ========================================================== */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---- Base desktop: snap + fullscreen sections ---- */
@media (min-width: 880px) {
  html {
    scroll-snap-type: y proximity;
    scroll-padding-top: 0;
  }

  .hero {
    height: calc(100dvh - 103px); /* 104px da barra − 1px de overlap */
    scroll-snap-align: start;
  }

  .hero-tagline-bar {
    scroll-snap-align: start;
  }

  .section {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    scroll-snap-align: start;
    padding-block: 72px;
  }

  /* Help tem mais conteúdo textual — padding menor e gap do container fixo */
  .help {
    min-height: 100dvh;
    padding-block: 56px;
  }
  .help .container { gap: 36px; }
  .help-highlights { margin-top: 0; }
  .help-card { min-height: unset; }

  /* Espaçamentos internos desktop — base confortável para telas altas */
  .cards { margin-top: 44px; }
  .service-foot { margin-top: 36px; }
  .tl-desktop { margin-top: 48px; }
  .tl-note { white-space: nowrap; max-width: none; }

  /* Seções 4–8: sistema visual consistente — cabeçalho e cards */
  .service-header { padding-bottom: 20px; }
  .service .card:not(.card--brown) { min-height: 310px; }

  /* Planejamento Patrimonial — tagline do service-foot em linha única no desktop */
  .service--soft .service-foot p {
    white-space: nowrap;
    max-width: max-content;
  }
}

/* ==========================================================
   Desktop GRANDE (≥1101px de largura E ≥961px de altura) — telas
   1080p / 1440×900 / 1440×1080. eyebrow + título + subtítulo
   ficam onde estão; service-foot vai para o fundo com margin-top:auto,
   absorvendo o espaço extra; o restante recentraliza-se sozinho.
   ========================================================== */
@media (min-width: 1101px) and (min-height: 961px) {
  /* O container vira flex column para que margin-top:auto no foot
     funcione (no flex pai .section ele era ignorado — o .container
     era o único filho). */
  .service.section > .container,
  .reviews.section > .container,
  .timeline.section > .container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .service .service-foot,
  .reviews .reviews-foot {
    margin-top: auto;            /* empurra o CTA para o fundo */
    padding-top: clamp(28px, 4vh, 56px);
    padding-bottom: clamp(20px, 3vh, 40px); /* equivalência visual com o topo */
  }
  /* mais respiro entre cards/timeline e o eyebrow acima */
  .service .cards { margin-top: clamp(40px, 5vh, 64px); }
  /* Timeline: trilho verticalmente centrado (margin-block:auto), nota e CTA
     descem para a base — espaços iguais acima e abaixo do trilho. */
  .timeline .tl-desktop { margin-block: auto; }
  .timeline .tl-note {
    margin-top: 0;
    padding-top: clamp(20px, 3vh, 40px);
    padding-bottom: clamp(20px, 3vh, 40px);
  }
}

/* ==========================================================
   Desktop alto (821–960px de altura, ex: 1440×900)
   Ancora os eyebrows das seções 4–10 no mesmo Y.
   — Seções 4–7: mesma posição entre si.
   — Seção 10 (Reviews): mesma âncora da Seção 8 (Orientações Gerais),
     pois ambas usam o mesmo seletor e padding-block-start.
   Não se aplica a 1080p+ para não criar excesso de espaço inferior.
   ========================================================== */
@media (min-width: 880px) and (min-height: 821px) and (max-height: 960px) {
  .service.section, .timeline.section, .reviews.section {
    justify-content: flex-start;
    padding-block-start: 38px;
    padding-block-end: 0;
  }
  /* Container vira flex column ocupando a altura toda: o miolo (cards/
     trilho) centraliza com margin-block:auto e o CTA ancora na base com
     padding fixo — TODOS os CTAs (4, 6, 7, 8 e Prova Social) na mesma
     posição vertical. */
  .service.section > .container,
  .timeline.section > .container,
  .reviews.section > .container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .service .cards,
  .tl-desktop { margin-block: auto; }
  .timeline .tl-desktop {
    transform: translateY(-5px);
  }
  .service .service-foot,
  .reviews-foot {
    margin-top: auto;
    margin-bottom: 0;
    padding-bottom: 74px;
  }
  .service .service-foot p {
    margin-bottom: 18px;
  }
  .service[data-screen-label="Inventário Extrajudicial"] .cards {
    transform: translateY(10px);
  }
  .service[data-screen-label="Inventário Judicial"] .cards {
    transform: translateY(11px);
  }
  .service[data-screen-label="Planejamento Patrimonial"] .cards {
    transform: translateY(13px);
  }
  .service[data-screen-label="Orientações Gerais"] .cards {
    transform: translateY(28px);
  }
  /* Timeline: APENAS o trilho tem margin-block:auto → fica verticalmente
     centrado (espaços iguais acima e abaixo). A nota e o CTA descem juntos
     para a base (CTA a 44px do fundo, alinhado às demais seções). */
  .timeline .service-foot {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 74px;
  }
  .timeline .tl-note {
    margin-top: 0;
    margin-bottom: 18px;
  }
  .timeline .tl-node__card {
    padding-block: 18px;
  }
  /* Seções com pouco conteúdo: respiro extra entre título e subtítulo */
  .section-lead { margin-top: 22px; }
}

@media (min-width: 880px) and (max-width: 1100px) {
  .hero {
    height: calc(100svh - 95px); /* 96px da barra − 1px de overlap */
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none !important; }
}

/* ==========================================================
   Desktop 16:9 compacto — cobre 768–820px de altura
   Ex: 1366×768, 1440×810. Padding 38px → 692px disponíveis.
   Estratégia: reduzir apenas espaçamentos, não tamanho de texto.
   ========================================================== */

@media (min-width: 880px) and (max-height: 820px) {
  .section   { padding-block: 38px; }
  .help      { padding-block: 28px; }
  .help .container { gap: 18px; }
  .cards     { margin-top: 24px; gap: 18px; }
  .help-highlights { gap: 18px; } /* acompanha o gap compacto dos .cards */
  .service-foot { margin-top: 20px; }
  .tl-desktop   { margin-top: 28px; }
  /* Seções 4–8: ancora eyebrow na mesma posição vertical dos tagline-items (52px).
     38px compensa o offset de ~4–5px que o strut da service-header (16px × 1.6 = 25.6px)
     adiciona ao posicionamento da eyebrow dentro da primeira line-box. */
  .service.section, .timeline.section {
    justify-content: flex-start;
    padding-block-start: 38px;
  }
  .service[data-screen-label="Inventário Extrajudicial"] .cards {
    transform: translateY(8px);
  }
  .service[data-screen-label="Inventário Judicial"] .cards {
    transform: translateY(37px);
  }
  .service[data-screen-label="Planejamento Patrimonial"] .cards {
    transform: translateY(27px);
  }
  .service[data-screen-label="Orientações Gerais"] .cards {
    transform: translateY(70px);
  }
}

@media (min-width: 1120px) and (max-height: 820px) {
  .service[data-screen-label="Inventário Extrajudicial"] .cards {
    transform: translateY(30px);
  }
  .service[data-screen-label="Inventário Judicial"] .cards {
    transform: translateY(50px);
  }
  .service[data-screen-label="Planejamento Patrimonial"] .cards {
    transform: translateY(28px);
  }
  .service[data-screen-label="Orientações Gerais"] .cards {
    transform: translateY(70px);
  }
}

/* Seções 4–8: cards normalizados em desktop compacto */
@media (min-width: 880px) and (max-height: 820px) {
  /* Remove padding extra do cabeçalho — gap já é dado por .cards margin-top */
  .service-header { padding-bottom: 0; }
  /* Cards light: padding reduzido, ícone menor, min-height proporcional */
  .service .card:not(.card--brown) {
    padding: 24px 20px 24px;
    gap: 12px;
    min-height: 240px;
  }
  .service .card:not(.card--brown) .card__list { gap: 10px; }
  /* Cards brown: compact override que faltava — eram 364px/40px no crítico */
  .card--brown {
    padding: 28px 24px 28px;
    gap: 14px;
    min-height: 290px;
  }
  /* Ícones mais compactos no crítico */
  .service .card__icon {
    width: 48px;
    height: 48px;
  }
}

/* About: imagem portrait sem aspect-ratio rígido em tela baixa */
@media (min-width: 880px) and (max-height: 820px) {
  .about-image img {
    aspect-ratio: auto;
    max-height: min(460px, 56vh);
    object-fit: cover;
  }
  .about-block-title { margin-top: 14px; margin-bottom: 6px; }
  .about-mission     { margin-top: 14px; }
  .about-cta         { margin-top: 14px; }
}

/* Timeline: trilho e nodes compactados.
   Trilho mais alto + margem maior para os cards ímpares (que crescem para cima
   a partir do centro do trilho) não invadirem o section-lead. */
@media (min-width: 880px) and (max-height: 820px) {
  .tl-desktop       { margin-top: 44px; }
  .tl-rail          { min-height: min(320px, 42vh); }
  .tl-node__dot     { width: 42px; height: 42px; font-size: 16px; }
  .tl-node__card    { width: clamp(170px, 116%, 204px); padding: 10px 14px; }
  .tl-node__title   { font-size: 10px; }
  .tl-node__desc    { font-size: 11.5px; margin-top: 4px; }
  .tl-node__icon    { width: 22px; height: 22px; margin-bottom: 4px; }
  #etapas .service-foot { display: none; }
}

/* Reviews (Avaliações) */
@media (min-width: 880px) and (max-height: 820px) {
  .reviews-summary { margin-top: 14px; }
  .reviewers       { margin-top: 14px; }
  .testimonial     { margin-top: 20px; padding: 18px 22px 16px; }
}

/* FAQ */
@media (min-width: 880px) and (max-height: 820px) {
  .faq-list            { margin-top: 28px; gap: 8px; }
  details.qa summary   { padding: 12px 20px; }
}

/* Contato */
@media (min-width: 880px) and (max-height: 820px) {
  .contact-list { margin-top: 14px; gap: 8px; }
  .contact-cta  { margin-top: 14px; }
}

/* CTAs e notas: ancorados a 47px da base do viewport — desktop crítico (1366×768)
   Espelha o espaçamento do eyebrow no topo (47px do topo), criando simetria visual.
   Seções têm min-height: 100dvh e position sticky/relative. */
@media (min-width: 880px) and (max-height: 820px) {
  .service .service-foot,
  .reviews-foot,
  .help-checklist,
  .timeline .tl-note {
    position: absolute;
    bottom: 47px;
    left: 0;
    right: 0;
    margin-top: 0;
  }
}

@media (min-width: 1120px) {
  .help.section {
    min-height: 0;
    display: block;
    justify-content: initial;
    scroll-snap-align: none;
    padding-block: 0;
  }
  .help > .hero-tagline-bar {
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .help-panel {
    min-height: calc(100dvh - 104px);
    scroll-snap-align: start;
  }
  .help-panel--intro {
    display: grid;
  }
  .help-intro {
    display: grid;
    align-content: center;
    min-height: calc(100dvh - 104px);
    padding-block: clamp(38px, 6vh, 64px);
  }
  .help-panel--cards {
    display: grid;
    align-items: center;
    padding-block: clamp(38px, 6vh, 64px);
  }
  .help-cards-wrap {
    padding-block: 0;
    gap: 0;
  }
  .help-highlights {
    margin-top: 0;
  }
  .help-checklist {
    margin-top: clamp(22px, 3.5vh, 34px);
  }
}

@media (min-width: 1120px) and (max-height: 820px) {
  .help-intro {
    padding-block: 32px;
  }
  .help-body {
    font-size: 15.5px;
    line-height: 1.65;
  }
  .help-panel--cards {
    padding-block: 34px;
    position: relative; /* âncora para .help-checklist position:absolute */
  }
  .help-card {
    padding: 32px 20px 32px;
    gap: 20px;
  }
  .help-card__icon svg {
    width: 26px;
    height: 26px;
  }
  .help-card p {
    font-size: 15px;
    line-height: 1.62;
  }
  .help-checklist {
    margin-top: 20px;
    gap: 14px;
  }
  .help-checklist p {
    font-size: 15px;
  }
}

/* Help cards — proporção levemente portrait (altura > largura) no grid de 4 colunas */
@media (min-width: 960px) {
  .help-card {
    min-height: 284px;
  }
}

@media (max-width: 1100px) {
  .help.section {
    display: block;
    padding-block: 0;
    scroll-snap-align: none;
  }
  .help-panel {
    scroll-snap-align: none;
  }
  /* Parte B (cards): menos respiro no topo — ao tocar a seta da parte A,
     o primeiro card fica próximo ao topo da tela, com a mesma margem usada
     nas laterais (var(--pad)). */
  .help-cards-wrap { padding-top: var(--pad); }
}

@media (min-width: 1120px) {
  html,
  body {
    scroll-snap-type: none;
  }

  .help-panel,
  body > section.section:not(.help):not(.contact) {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .help-panel,
  body > section.section:not(.help):not(.contact) {
    isolation: isolate;
  }

  .help .help-panel {
    top: 104px;
  }

  body > section.section:not(.help):not(.contact) {
    z-index: 2;
  }

  .contact,
  .site-footer {
    position: relative;
    z-index: 2;
  }
}