/* ==========================================================================
   Susana Lopes Farinha — Página Principal (Com Alma)
   IDV: Marfim #F4F0E8 · Areia #D7D0C4 · Ameixa Suave #74627C · Sálvia #8C927D · Grafite #3C3840
   Fontes: Cormorant Garamond (display) + Montserrat (corpo)
   ========================================================================== */

/* ---------- 0. Tokens ---------- */
:root {
  --marfim: #F4F0E8;
  --marfim-hi: #FAF8F3;
  --areia: #D7D0C4;
  --ameixa: #74627C;
  --salvia: #8C927D;
  --grafite: #3C3840;

  /* escala derivada da ameixa (500 = base) */
  --ameixa-100: #E9E2EC;
  --ameixa-200: #CFC3D5;
  --ameixa-300: #B9A9C1;
  --ameixa-400: #978699;
  --ameixa-600: #5F4F66;
  --ameixa-700: #4B3E51;
  --ameixa-800: #382E3D;

  /* escala derivada do grafite (fundos escuros) */
  --grafite-800: #332F37;
  --grafite-900: #2A262E;
  --grafite-950: #1F1C22;

  --salvia-300: #B9BEAE;
  --salvia-700: #5F6552;
  --text-2: #6B6772;

  --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --hd-h: 84px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 32px;
}

/* ---------- 1. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--hd-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--grafite);
  background: var(--marfim);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
p { margin: 0 0 1em; }
.wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
body.no-scroll { overflow: hidden; }

/* ---------- 2. Tipografia ---------- */
.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 3.9vw, 56px);
  line-height: 1.06;
  letter-spacing: -.012em;
  margin: 20px 0 0;
  text-wrap: balance;
}
.h2 em, .h3 em { font-style: italic; color: var(--ameixa); }
.sec--dark .h2 em, .sec--dark .h3 em {
  background: linear-gradient(92deg, #DDD2E2 0%, var(--ameixa-300) 55%, #A895B2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.12;
  letter-spacing: -.008em;
  margin: 0;
  text-wrap: balance;
}
.lead {
  font-weight: 300;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.75;
  margin: 18px 0 0;
  color: var(--text-2);
}
.sec--dark .lead { color: var(--areia); }

/* ---------- 3. Secções e fundos ---------- */
.sec { position: relative; padding: clamp(84px, 10vw, 140px) 0; overflow-x: clip; }
.sec--light { background: var(--marfim); color: var(--grafite); z-index: 1; }
.sec--dark { background: var(--grafite-900); color: var(--marfim); z-index: 2; }
.sec__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sec > .wrap { position: relative; z-index: 1; }
.sec__head { text-align: center; max-width: 860px; margin-inline: auto; }
.sec__cta { display: flex; justify-content: center; margin-top: clamp(44px, 5vw, 64px); }

/* orbes de luz (sem filter: blur — o gradiente já é suave, mais leve na GPU) */
.orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  animation: float 18s ease-in-out infinite alternate;
}
@keyframes float {
  0%   { translate: 0 0; scale: 1; }
  50%  { translate: 3% 5%; scale: 1.06; }
  100% { translate: -3% -3%; scale: .97; }
}
.orb--1 { width: 70vw; height: 70vw; max-width: 1100px; max-height: 1100px; right: -18vw; top: -22vw;
  background: radial-gradient(circle, rgba(116,98,124,.62) 0%, rgba(116,98,124,.22) 32%, rgba(116,98,124,0) 66%); }
.orb--2 { width: 46vw; height: 46vw; left: -20vw; bottom: -24vw;
  background: radial-gradient(circle, rgba(140,146,125,.30) 0%, rgba(140,146,125,.08) 40%, transparent 68%); animation-delay: -7s; }
.orb--3 { width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; left: -20vw; top: -10vw;
  background: radial-gradient(circle, rgba(116,98,124,.45) 0%, rgba(116,98,124,.14) 38%, transparent 68%); }
.orb--3b { width: 46vw; height: 46vw; right: -14vw; bottom: -6vw;
  background: radial-gradient(circle, rgba(116,98,124,.36) 0%, transparent 66%); animation-delay: -9s; }
.orb--4 { width: 62vw; height: 62vw; max-width: 980px; max-height: 980px; right: -22vw; top: -14vw;
  background: radial-gradient(circle, rgba(116,98,124,.42) 0%, rgba(116,98,124,.12) 40%, transparent 68%); }
.orb--5 { width: 80vw; height: 60vw; max-width: 1200px; left: 50%; top: -20vw; translate: -50% 0;
  background: radial-gradient(ellipse, rgba(116,98,124,.55) 0%, rgba(116,98,124,.18) 38%, transparent 68%); animation: none; }
.orb--l1 { width: 60vw; height: 60vw; right: -24vw; top: -18vw;
  background: radial-gradient(circle, rgba(116,98,124,.16) 0%, rgba(116,98,124,.05) 40%, transparent 68%); }
.orb--l2 { width: 56vw; height: 56vw; left: -22vw; bottom: -20vw;
  background: radial-gradient(circle, rgba(140,146,125,.20) 0%, rgba(140,146,125,.06) 40%, transparent 68%); animation-delay: -5s; }

/* vetores de borda: entalhe no topo (secção escura depois de clara) e domo na base (escura antes de clara) */
.notch {
  position: absolute; top: -1px; left: 50%; translate: -50% 0;
  width: 180px; height: 40px; z-index: 3; pointer-events: none;
}
.notch svg { width: 100%; height: 100%; fill: var(--marfim); }
.notch__chev {
  position: absolute; left: 50%; top: 8px; width: 9px; height: 9px;
  border-right: 1.5px solid var(--ameixa); border-bottom: 1.5px solid var(--ameixa);
  transform: translateX(-50%) rotate(45deg);
  animation: chev 2.2s ease-in-out infinite;
}
@keyframes chev { 0%, 100% { translate: 0 0; opacity: 1; } 50% { translate: 0 4px; opacity: .55; } }
.bump {
  position: absolute; bottom: -30px; left: 50%; translate: -50% 0;
  width: 180px; height: 30px; z-index: 3; pointer-events: none;
}
.bump svg { width: 100%; height: 100%; fill: var(--bump-fill, var(--grafite-900)); }

/* ---------- 4. Componentes ---------- */
/* badge / etiqueta de secção */
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px 10px 13px; border-radius: 999px;
  border: 1px solid rgba(60,56,64,.22); background: rgba(250,248,243,.72);
  font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: .12em; text-transform: uppercase;
  color: var(--grafite);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.badge i { width: 15px; height: 15px; color: var(--salvia-700); transition: transform .5s var(--ease); }
.badge i svg { width: 100%; height: 100%; }
.badge:hover { background: var(--grafite); color: var(--marfim); border-color: var(--grafite); transform: translateY(-2px); }
.badge:hover i { color: var(--salvia-300); transform: rotate(-12deg); }
.badge--d { border-color: rgba(244,240,232,.28); background: rgba(244,240,232,.06); color: var(--marfim); }
.badge--d i { color: var(--salvia-300); }
.badge--d:hover { background: var(--marfim); color: var(--grafite); border-color: var(--marfim); }
.badge--d:hover i { color: var(--salvia-700); }

/* botão principal — pílula em gradiente de ameixa com halo e seta em círculo */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 12px 12px 26px; border-radius: 999px;
  background: linear-gradient(100deg, #8E7B98 0%, var(--ameixa) 45%, #5B4B63 100%);
  background-size: 200% 100%; background-position: 0 0;
  color: var(--marfim); text-decoration: none; white-space: nowrap;
  font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: .02em;
  border: 1px solid rgba(244,240,232,.22);
  box-shadow: 0 12px 34px -10px rgba(116,98,124,.85), 0 0 0 5px rgba(116,98,124,.16), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-position .7s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.26) 50%, transparent 68%);
  transform: translateX(-130%); transition: transform .9s var(--ease);
}
.btn:hover, .btn:focus-visible {
  transform: translateY(-3px);
  background-position: 100% 0;
  box-shadow: 0 20px 44px -12px rgba(116,98,124,1), 0 0 0 7px rgba(116,98,124,.22), inset 0 1px 0 rgba(255,255,255,.22);
  outline: none;
}
.btn:hover::before { transform: translateX(130%); }
.btn:active { transform: translateY(-1px); }
.btn__ic {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--marfim); color: var(--ameixa-600);
  transition: transform .5s var(--ease), background .5s var(--ease);
}
.btn__ic svg { width: 16px; height: 16px; }
.btn:hover .btn__ic { transform: translateX(4px); background: #fff; }
.btn--lg { padding: 14px 14px 14px 32px; font-size: 15px; gap: 18px; }
.btn--lg .btn__ic { width: 42px; height: 42px; }
.btn--lg .btn__ic svg { width: 18px; height: 18px; }
.btn--sm { padding: 8px 8px 8px 18px; font-size: 12px; letter-spacing: .06em; gap: 10px; box-shadow: 0 8px 22px -8px rgba(116,98,124,.8), 0 0 0 3px rgba(116,98,124,.14); }
.btn--sm .btn__ic { width: 28px; height: 28px; }
.btn--sm .btn__ic svg { width: 13px; height: 13px; }

/* pílula numerada dos cartões escuros */
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 12px; border-radius: 999px; margin: 0 0 20px;
  background: rgba(116,98,124,.30); border: 1px solid rgba(185,169,193,.32);
  font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1; letter-spacing: .1em;
  color: var(--marfim);
}
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ameixa-300); box-shadow: 0 0 12px var(--ameixa-300); }

/* duotone: foto em cinza + camada de cor ameixa (mix-blend color); no hover volta a cor */
.duo { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-md); background: var(--ameixa-700); }
.duo img {
  position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.04) brightness(.98);
  transition: filter .8s var(--ease), transform 1.1s var(--ease);
}
.duo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--ameixa); mix-blend-mode: color;
  transition: opacity .8s var(--ease);
}
.duo::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(42,38,46,0) 55%, rgba(42,38,46,.35) 100%);
  transition: opacity .8s var(--ease);
}

/* ---------- 5. Header + drawer ---------- */
.hd {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--hd-h); display: flex; align-items: center; color: var(--marfim);
}
.hd::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(36,32,40,.74); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(244,240,232,.08);
  opacity: 0; transition: opacity .5s var(--ease);
}
.hd.is-scrolled::before { opacity: 1; }
.hd__in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hd__brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.hd__brand img { height: 32px; width: auto; transition: transform .5s var(--ease); }
.hd__brand:hover img { transform: translateY(-2px); }
.hd__brand span {
  font-weight: 500; font-size: 11px; line-height: 1.2; letter-spacing: .28em; text-transform: uppercase;
  color: var(--areia); white-space: nowrap; padding-left: 14px; border-left: 1px solid rgba(244,240,232,.25);
}
.hd__nav { display: flex; align-items: center; gap: 30px; }
.hd__nav > a:not(.btn) {
  position: relative; padding: 8px 0; text-decoration: none;
  font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(244,240,232,.86); transition: color .3s;
}
.hd__nav > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--ameixa-300); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.hd__nav > a:not(.btn):hover { color: #fff; }
.hd__nav > a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }

.burger {
  display: none; position: relative; width: 44px; height: 44px; padding: 0;
  background: rgba(244,240,232,.06); border: 1px solid rgba(244,240,232,.25); border-radius: 50%;
  cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  transition: background .4s;
}
.burger span { display: block; width: 18px; height: 1.5px; background: var(--marfim); transition: transform .45s var(--ease), opacity .3s; }
.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 55; padding: calc(var(--hd-h) + 24px) var(--pad) 40px;
  background: linear-gradient(160deg, #2B2730 0%, #1F1C22 100%);
  transform: translateX(100%); pointer-events: none; overflow: hidden;
  transition: transform .6s var(--ease);
}
.drawer[data-state="open"] { transform: translateX(0); pointer-events: auto; }
.drawer__nav { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.drawer__nav > a:not(.btn) {
  font-family: var(--font-display); font-weight: 500; font-size: 38px; line-height: 1; color: var(--marfim); text-decoration: none;
  opacity: 0; translate: 20px 0; transition: opacity .6s var(--ease), translate .6s var(--ease);
}
.drawer[data-state="open"] .drawer__nav > a:not(.btn) { opacity: 1; translate: 0 0; }
.drawer[data-state="open"] .drawer__nav > a:nth-child(1) { transition-delay: .15s; }
.drawer[data-state="open"] .drawer__nav > a:nth-child(2) { transition-delay: .22s; }
.drawer[data-state="open"] .drawer__nav > a:nth-child(3) { transition-delay: .29s; }
.drawer__nav .btn { margin-top: 18px; }
.drawer__ramo { position: absolute; right: -40px; bottom: -60px; height: 70vh; width: auto; color: var(--salvia); opacity: .16; }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* altura = proporção 16:9 da foto (a foto cobre exatamente, sem zoom nem sobra).
     Com a foto larga 2,4:1 no lugar: height: clamp(640px, calc(100vw * 9 / 16), 92vh); e object-position: right center */
  height: max(640px, calc(100vw * 9 / 16));
  display: flex; align-items: center;
  padding-top: var(--hd-h);
  background: linear-gradient(180deg, #221F26 0%, #2E2A33 42%, var(--grafite) 100%);
  color: var(--marfim);
}
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero__ramo {
  position: absolute; right: 4%; top: -6%; height: 118%; width: auto;
  color: var(--salvia); opacity: .11; transform: rotate(14deg); transform-origin: 50% 50%;
  animation: sway 16s ease-in-out infinite alternate;
}
@keyframes sway { from { rotate: -1.5deg; } to { rotate: 1.5deg; } }
.hero__sig { position: absolute; left: -6%; bottom: 4%; width: min(72vw, 980px); opacity: .045; }

.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 660px); align-items: center; }
.hero__copy { padding: 40px 0 clamp(60px, 9vh, 120px); }
.hero__h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(40px, 4.9vw, 68px); line-height: 1.02; letter-spacing: -.014em;
  margin: 26px 0 24px; text-wrap: balance;
}
.hero__h1 > span { display: block; }
.hero__h1-em {
  font-style: italic;
  background: linear-gradient(92deg, #E3D9E7 0%, var(--ameixa-300) 50%, #A491AE 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub { font-weight: 300; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.75; color: var(--areia); max-width: 560px; margin: 0 0 36px; }
.hero__cta { display: flex; gap: 16px; align-items: center; }

/* foto 16:9 full-bleed: ela à direita, véu escuro à esquerda para o texto */
.hero__visual { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.hero__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  /* contain + âncora direita/baixo: a foto nunca é ampliada além da altura do hero;
     em telas largas sobra parede à esquerda, preenchida pelo fundo da secção */
  object-fit: cover; object-position: right center;
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
.hero__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(34,31,38,.78) 0%, rgba(34,31,38,.62) 24%, rgba(34,31,38,.28) 42%, rgba(34,31,38,0) 56%),
    linear-gradient(180deg, rgba(34,31,38,.45) 0%, rgba(34,31,38,0) 18%, rgba(60,56,64,0) 80%, var(--grafite) 100%);
}
.hero__name { position: absolute; left: 76%; top: 33%; padding-left: 50px; white-space: nowrap; z-index: 2; transition: left .3s, top .3s; }
.hero__name::before { content: ""; position: absolute; left: 4px; top: 15px; width: 34px; height: 1px; background: rgba(244,240,232,.55); }
.hero__name::after { content: ""; position: absolute; left: 0; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--ameixa-200); box-shadow: 0 0 14px var(--ameixa-300); }
.hero__name strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.1; }
.hero__name small { display: block; margin-top: 6px; font-weight: 500; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--areia); }

/* entrada do hero — em CSS puro, não depende do JS para aparecer */
@keyframes rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes photoIn { from { opacity: 0; translate: 0 50px; } to { opacity: 1; translate: 0 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.hero__a { animation: rise 1.1s var(--ease) both; }
.hero__a--1 { animation-delay: .15s; }
.hero__a--2 { animation-delay: .30s; }
.hero__a--3 { animation-delay: .45s; }
.hero__a--4 { animation-delay: .62s; }
.hero__a--5 { animation-delay: .78s; }
.hero__a--6 { animation: photoIn 1.5s var(--ease) .35s both; }
.hero__a--7 { animation: fadeIn 1s var(--ease) 1.4s both; }

/* ---------- 7. Problema (claro) ---------- */
.split {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4.5vw, 64px); align-items: center;
  margin-top: clamp(40px, 5vw, 64px); padding: clamp(20px, 3vw, 36px);
  border-radius: var(--r-xl); background: rgba(250,248,243,.82); border: 1px solid rgba(60,56,64,.08);
  box-shadow: 0 40px 90px -50px rgba(60,56,64,.45), inset 0 1px 0 #fff;
  transition: box-shadow .6s var(--ease), transform .6s var(--ease);
}
.split:hover { box-shadow: 0 50px 100px -50px rgba(116,98,124,.55), inset 0 1px 0 #fff; transform: translateY(-3px); }
.split__media { position: relative; margin: 0; aspect-ratio: 4 / 4.4; isolation: isolate; }
.split__media .duo { position: absolute; inset: 0; border-radius: 24px; transform: rotate(-2.2deg); transition: transform .8s var(--ease); box-shadow: 0 30px 60px -30px rgba(60,56,64,.6); }
.split:hover .split__media .duo { transform: rotate(0deg) scale(1.01); }
.split:hover .duo img { filter: none; transform: scale(1.04); }
.split:hover .duo::after, .split:hover .duo::before { opacity: 0; }
/* foto do card do problema: moldura arredondada, ligeiramente rodada, cores naturais */
.split__photo {
  position: absolute; inset: 0; border-radius: 24px; overflow: hidden; transform: rotate(-2.2deg);
  box-shadow: 0 30px 60px -30px rgba(60,56,64,.6); transition: transform .8s var(--ease);
}
.split__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform 1.1s var(--ease); }
.split:hover .split__photo { transform: rotate(0deg) scale(1.01); }
.split:hover .split__photo img { transform: scale(1.04); }
.split__ramo { position: absolute; left: -8%; bottom: -10%; height: 62%; width: auto; color: var(--salvia); opacity: .8; rotate: -22deg; pointer-events: none; }

/* board de branding (não usado na v8; fica para a página de serviços) */
.board { position: absolute; inset: 0; --spread: 1; }
.board__card {
  position: absolute; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(60,56,64,.55), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.board__card--logo {
  left: 2%; top: 4%; width: 66%; aspect-ratio: 1.68; rotate: -6deg;
  background: var(--marfim-hi); border: 1px solid rgba(215,208,196,.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10%; padding: 8% 10%;
}
.board__card--logo img { width: 78%; height: auto; }
.board__line { width: 40%; height: 1px; background: var(--areia); }
.board__card--type {
  right: 0; top: 26%; width: 50%; aspect-ratio: 1; rotate: 6deg;
  background: linear-gradient(160deg, var(--grafite) 0%, var(--grafite-900) 100%); color: var(--marfim);
  display: flex; flex-direction: column; justify-content: space-between; padding: 8% 10%;
  box-shadow: 0 30px 60px -28px rgba(31,28,34,.8), inset 0 1px 0 rgba(255,255,255,.08);
}
.board__aa { font-family: var(--font-display); font-weight: 500; font-size: clamp(64px, 8.5vw, 108px); line-height: .9; letter-spacing: -.03em; }
.board__fonts { display: flex; flex-direction: column; gap: 4px; }
.board__fonts strong { font-family: var(--font-display); font-weight: 500; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.1; }
.board__fonts small { font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ameixa-300); }
.board__fan { position: absolute; left: 8%; bottom: 3%; width: 62%; height: 42%; margin: 0; padding: 0; list-style: none; }
.board__fan li {
  position: absolute; left: 0; bottom: 0; width: 36%; height: 100%; border-radius: 8px;
  background: var(--c); color: var(--t); border: 1px solid rgba(60,56,64,.10);
  transform-origin: 14% 96%; rotate: calc(var(--r) * var(--spread));
  box-shadow: 4px 0 14px -6px rgba(31,28,34,.45);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 9px;
  transition: rotate .8s var(--ease);
}
.board__fan li span { font-family: var(--font-body); font-weight: 600; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.board__fan li small { font-family: var(--font-body); font-weight: 400; font-size: 9px; opacity: .75; letter-spacing: .04em; }
.board__fan li:nth-child(1) { z-index: 1; } .board__fan li:nth-child(2) { z-index: 2; } .board__fan li:nth-child(3) { z-index: 3; } .board__fan li:nth-child(4) { z-index: 4; } .board__fan li:nth-child(5) { z-index: 5; }
.board__ramo { position: absolute; left: -10%; top: 38%; height: 46%; width: auto; color: var(--salvia); opacity: .8; rotate: -22deg; z-index: -1; }
.split:hover .board { --spread: 1.28; }
.split:hover .board__card--logo { transform: translateY(-6px) rotate(-2deg); }
.split:hover .board__card--type { transform: translateY(-6px) rotate(2deg); }
.split__body p { font-weight: 300; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.8; color: var(--text-2); margin: 0 0 1.1em; }
.split__body p:last-child { margin-bottom: 0; }
.split__body strong { font-weight: 600; color: var(--ameixa); }

/* ---------- 8. Sem direção (escuro) ---------- */
.dir { background: linear-gradient(180deg, var(--grafite) 0%, #2E2A33 55%, var(--grafite-900) 100%); --bump-fill: var(--grafite-900); }
.dir__sig { position: absolute; right: -10%; top: 30%; width: min(60vw, 820px); opacity: .04; rotate: -6deg; }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(40px, 5vw, 60px); }
.card-d {
  position: relative; overflow: hidden;
  padding: 36px 36px 40px; border-radius: 24px;
  background: linear-gradient(160deg, rgba(116,98,124,.30) 0%, rgba(60,56,64,.50) 55%, rgba(42,38,46,.72) 100%);
  border: 1px solid rgba(244,240,232,.10);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px -34px rgba(0,0,0,.75);
  transition: transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease);
}
.card-d::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 20% 0%, rgba(185,169,193,.18), transparent 50%);
  opacity: 0; transition: opacity .6s var(--ease);
}
.card-d:hover { transform: translateY(-7px); border-color: rgba(185,169,193,.48); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 34px 70px -34px rgba(116,98,124,.9); }
.card-d:hover::after { opacity: 1; }
.card-d p { font-weight: 300; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: var(--marfim); margin: 0; }
.check {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; margin: 0 0 22px;
  background: rgba(116,98,124,.34); border: 1px solid rgba(185,169,193,.42); color: var(--marfim);
  transition: background .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.check svg { width: 20px; height: 20px; }
.card-d:hover .check { background: var(--ameixa); box-shadow: 0 0 26px rgba(116,98,124,.85); transform: scale(1.06); }
.card-d__n { position: absolute; right: 26px; top: 22px; font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: .06em; color: var(--ameixa-300); opacity: .7; }

.flow { margin-top: clamp(56px, 7vw, 96px); text-align: center; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 40px 0 0; padding: 0; }
.step {
  position: relative; padding: 28px 16px 26px; border-radius: 20px;
  background: rgba(244,240,232,.035); border: 1px solid rgba(244,240,232,.09);
  transition: transform .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
}
.step:hover { transform: translateY(-5px); background: rgba(116,98,124,.22); border-color: rgba(185,169,193,.42); }
.step__n {
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  border: 1px solid var(--ameixa-300); font-family: var(--font-display); font-weight: 500; font-size: 21px; color: var(--ameixa-200);
  transition: background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.step:hover .step__n { background: var(--ameixa); color: var(--marfim); box-shadow: 0 0 28px rgba(116,98,124,.85); transform: scale(1.06); }
.step__t { display: block; font-weight: 500; font-size: 15px; line-height: 1.3; color: var(--marfim); }
.step:not(:last-child)::after {
  content: ""; position: absolute; right: -15px; top: 50%; width: 12px; height: 12px; translate: 0 -50%;
  border-top: 1.5px solid var(--ameixa-300); border-right: 1.5px solid var(--ameixa-300); rotate: 45deg; opacity: .75;
}

/* ---------- 9. Sobre (claro) ---------- */
.sobre__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.sobre__body p { font-weight: 300; font-size: clamp(14px, .98vw, 15px); line-height: 1.7; color: var(--text-2); margin: 0 0 .9em; }
.sobre__body .h2 { margin-bottom: 18px; font-size: clamp(32px, 3.4vw, 48px); }
.quote {
  position: relative; margin: 18px 0 20px; padding: 16px 22px 18px 26px;
  border-left: 2px solid var(--ameixa); background: rgba(116,98,124,.07); border-radius: 0 20px 20px 0;
  transition: background .5s var(--ease), transform .5s var(--ease);
}
.quote:hover { background: rgba(116,98,124,.12); transform: translateX(4px); }
.quote p { margin: 0 0 4px; font-size: 13px; letter-spacing: .02em; }
.quote q {
  display: block; quotes: "\201C" "\201D";
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(19px, 1.5vw, 23px); line-height: 1.3; color: var(--ameixa-700);
}
/* lista de formação (setas em círculo, como na referência) */
.formacao { margin-top: 22px; }
.formacao__t { font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: var(--grafite); margin: 0 0 4px; }
.formacao__lista { list-style: none; margin: 0; padding: 0; }
.formacao__lista li {
  display: flex; align-items: center; gap: 14px; padding: 11px 0;
  border-bottom: 1px solid rgba(60,56,64,.14); transition: transform .45s var(--ease);
}
.formacao__lista li:hover { transform: translateX(6px); }
.formacao__ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(116,98,124,.45); color: var(--ameixa);
  transition: background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease);
}
.formacao__ic svg { width: 14px; height: 14px; }
.formacao__lista li:hover .formacao__ic { background: var(--ameixa); color: var(--marfim); box-shadow: 0 10px 22px -10px rgba(116,98,124,.9); }
.formacao__lista span { font-weight: 500; font-size: 13px; line-height: 1.45; color: var(--ameixa-700); }

/* moldura de story do Instagram (liga ao perfil) */
.sobre__visual { position: relative; }
.story {
  position: relative; display: block; overflow: hidden; border-radius: 30px; aspect-ratio: 2 / 3;
  background: var(--areia); color: #fff; text-decoration: none;
  border: 1px solid rgba(116,98,124,.35);
  box-shadow: 0 0 0 6px rgba(116,98,124,.10), 0 50px 90px -46px rgba(60,56,64,.65);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); transform-style: preserve-3d; will-change: transform;
}
.story:hover { box-shadow: 0 0 0 8px rgba(116,98,124,.18), 0 60px 100px -46px rgba(116,98,124,.75); }
.story__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: transform 1.2s var(--ease); }
.story:hover .story__photo { transform: scale(1.035); }
.story__shade { position: absolute; left: 0; right: 0; height: 36%; pointer-events: none; }
.story__shade--top { top: 0; background: linear-gradient(180deg, rgba(30,26,34,.55) 0%, rgba(30,26,34,0) 100%); }
.story__shade--bottom { bottom: 0; background: linear-gradient(0deg, rgba(30,26,34,.62) 0%, rgba(30,26,34,0) 100%); }
.story__bars { position: absolute; left: 14px; right: 14px; top: 12px; display: flex; gap: 5px; }
.story__bars i { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.38); overflow: hidden; }
.story__bars i.is-on::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: storybar 7s linear infinite; }
@keyframes storybar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.story__head { position: absolute; left: 14px; right: 14px; top: 24px; display: flex; align-items: center; gap: 10px; }
.story__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--ameixa-300); }
.story__user { display: flex; flex-direction: column; line-height: 1.15; }
.story__user strong { font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: .01em; color: #fff; }
.story__user small { font-family: var(--font-body); font-weight: 400; font-size: 11px; color: rgba(255,255,255,.82); margin-top: 2px; }
.story__icons { margin-left: auto; display: flex; align-items: center; gap: 14px; color: #fff; }
.story__icons svg { width: 18px; height: 18px; }
.story__foot { position: absolute; left: 14px; right: 14px; bottom: 16px; display: flex; align-items: center; gap: 12px; }
.story__input {
  flex: 1; height: 44px; display: flex; align-items: center; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  font-family: var(--font-body); font-weight: 400; font-size: 14px; color: rgba(255,255,255,.88);
}
.story__heart, .story__send { display: grid; place-items: center; color: #fff; transition: transform .4s var(--ease); }
.story__heart svg, .story__send svg { width: 26px; height: 26px; transition: fill .4s; }
.story:hover .story__heart { animation: beat 1.1s ease-in-out infinite; }
.story:hover .story__heart svg { fill: #fff; }
.story:hover .story__send { transform: translate(3px, -3px); }
@keyframes beat { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.22); } }
.sobre__seal {
  position: absolute; right: -44px; top: 36%; width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(250,248,243,.94); border: 1px solid rgba(116,98,124,.4);
  box-shadow: 0 18px 34px -16px rgba(60,56,64,.55); z-index: 2; transition: transform .6s var(--ease);
}
.sobre__seal::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed rgba(116,98,124,.5); animation: spin 40s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.sobre__seal img { width: 72px; height: auto; }
.sobre__visual:hover .sobre__seal { transform: rotate(-8deg) scale(1.05); }
.sobre__links { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.sobre__links a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 999px;
  border: 1px solid rgba(116,98,124,.35); background: rgba(250,248,243,.7); color: var(--ameixa-700); text-decoration: none;
  font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  transition: background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease), border-color .45s;
}
.sobre__links a i { width: 16px; height: 16px; }
.sobre__links a i svg { width: 100%; height: 100%; }
.sobre__links a:hover { background: var(--ameixa); color: var(--marfim); border-color: var(--ameixa); transform: translateY(-2px); }
.sobre__ramo { position: absolute; right: -6%; bottom: -6%; height: 52%; width: auto; color: var(--salvia); opacity: .55; rotate: 24deg; pointer-events: none; z-index: -1; }

/* ---------- 10. Serviços (escuro) ---------- */
.serv { background: linear-gradient(180deg, var(--grafite-800) 0%, var(--grafite-900) 60%, var(--grafite-900) 100%); padding-bottom: clamp(104px, 11vw, 156px); }
.serv__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.serv__head-copy { max-width: 760px; }
.serv__head .h2 { margin-top: 20px; }
.serv__nav { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; }
.serv__line { width: clamp(60px, 14vw, 240px); height: 1px; background: rgba(244,240,232,.25); margin-right: 8px; }
.arrow {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(244,240,232,.28); background: rgba(244,240,232,.06); color: var(--marfim);
  transition: background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease), border-color .45s;
}
.arrow svg { width: 18px; height: 18px; }
.arrow:hover { background: var(--marfim); color: var(--ameixa-700); border-color: var(--marfim); transform: scale(1.08); }
.arrow:active { transform: scale(.98); }
.serv__viewport { margin-top: clamp(40px, 5vw, 56px); position: relative; z-index: 1; }
.serv__track {
  --gutter: max(var(--pad), calc((100% - var(--wrap)) / 2));
  display: flex; gap: 22px; list-style: none; margin: 0; padding: 10px var(--gutter) 30px;
  width: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; cursor: grab;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.serv__track::-webkit-scrollbar { display: none; }
.serv__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.sv {
  flex: 0 0 min(318px, 82vw); scroll-snap-align: start; user-select: none;
  padding: 14px 14px 30px; border-radius: 24px; text-align: center;
  background: linear-gradient(180deg, rgba(116,98,124,.26) 0%, rgba(60,56,64,.55) 60%, rgba(42,38,46,.7) 100%);
  border: 1px solid rgba(244,240,232,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px -36px rgba(0,0,0,.8);
  transition: transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease);
}
.sv:hover { transform: translateY(-8px); border-color: rgba(185,169,193,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 36px 70px -34px rgba(116,98,124,.95); }
.sv__media { margin: 0; aspect-ratio: 4 / 3; border-radius: 16px; }
.sv:hover .duo img { filter: none; transform: scale(1.05); }
.sv:hover .duo::after { opacity: 0; }
.sv__leaf { display: block; width: 46px; margin: 20px auto 10px; color: var(--salvia-300); transition: transform .6s var(--ease); }
.sv:hover .sv__leaf { transform: rotate(-8deg) scale(1.08); }
.sv__n { display: block; font-weight: 500; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--ameixa-300); }
.sv__t { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 2vw, 30px); line-height: 1.08; margin: 10px 0 12px; color: var(--marfim); text-wrap: balance; }
.sv__t small { display: block; font-size: .62em; font-style: italic; font-weight: 400; color: var(--ameixa-200); margin-top: 4px; }
.sv p { font-weight: 300; font-size: 14px; line-height: 1.65; color: var(--areia); margin: 0; padding: 0 8px; }

/* ---------- 11. Marquees cruzados ---------- */
.mq { position: relative; height: 0; overflow-x: clip; z-index: 5; }
.mq__band {
  position: absolute; left: -6%; width: 112%; top: 0; height: 60px;
  display: flex; align-items: center; overflow: hidden;
  background: linear-gradient(90deg, var(--ameixa-700) 0%, var(--ameixa) 50%, var(--ameixa-700) 100%);
  border-top: 1px solid rgba(244,240,232,.16); border-bottom: 1px solid rgba(244,240,232,.16);
}
.mq__band--back {
  transform: translateY(-50%) rotate(3deg); opacity: .6; filter: blur(2.6px);
  background: linear-gradient(90deg, #3A3040 0%, var(--ameixa-600) 50%, #3A3040 100%);
}
.mq__band--front { transform: translateY(-50%) rotate(-3deg); box-shadow: 0 24px 60px -24px rgba(0,0,0,.7); }
.mq__track { display: flex; align-items: center; width: max-content; animation: mq 44s linear infinite; will-change: transform; }
.mq__track--rev { animation-direction: reverse; animation-duration: 56s; }
.mq:hover .mq__track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
.mq__item { font-weight: 500; font-size: 13px; line-height: 1; letter-spacing: .3em; text-transform: uppercase; color: var(--marfim); padding: 0 26px; white-space: nowrap; }
.mq__leaf { width: 38px; color: var(--salvia-300); flex: 0 0 auto; }

/* ---------- 12. CTA final (escuro) ---------- */
.final { background: linear-gradient(180deg, var(--grafite-900) 0%, var(--grafite-950) 34%); padding-top: clamp(104px, 11vw, 156px); padding-bottom: clamp(96px, 12vw, 160px); }
.final__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 40%; opacity: .78; }
.final__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(31,28,34,.96) 0%, rgba(31,28,34,.86) 34%, rgba(31,28,34,.66) 52%, rgba(31,28,34,.28) 70%, rgba(31,28,34,.08) 100%),
    linear-gradient(180deg, var(--grafite-900) 0%, rgba(42,38,46,0) 22%, rgba(31,28,34,0) 78%, var(--grafite-950) 100%);
}
.final .orb--5 { opacity: .55; }
.final__inner { text-align: center; max-width: 820px; display: flex; flex-direction: column; align-items: center; }
.final__inner .lead { max-width: 640px; }
.final__inner .btn { margin-top: 36px; }
.final__ramo { position: absolute; top: 50%; height: 120%; width: auto; color: var(--salvia); opacity: .09; translate: 0 -50%; animation: sway 14s ease-in-out infinite alternate; }
.final__ramo--l { left: -3%; rotate: -18deg; }
.final__ramo--r { right: -3%; rotate: 18deg; transform: scaleX(-1); animation-delay: -7s; }

/* ---------- 13. Footer ---------- */
.ft { position: relative; overflow: hidden; background: var(--grafite-950); color: var(--areia); padding: 56px 0 44px; border-top: 1px solid rgba(244,240,232,.07); }
.ft__grid { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto auto; gap: 36px; align-items: center; }
.ft__social { display: flex; gap: 10px; }
.ft__social a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--marfim);
  border: 1px solid rgba(244,240,232,.22); background: rgba(244,240,232,.05);
  transition: background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease), border-color .45s;
}
.ft__social a svg { width: 18px; height: 18px; }
.ft__social a:hover { background: var(--marfim); color: var(--ameixa-700); border-color: var(--marfim); transform: translateY(-2px); }
.ft__brand img { width: 230px; height: auto; opacity: .92; transition: opacity .4s, transform .5s var(--ease); }
.ft__brand:hover img { opacity: 1; transform: translateY(-2px); }
.ft__nav { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; }
.ft__nav a { position: relative; font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,240,232,.7); text-decoration: none; transition: color .3s; }
.ft__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--ameixa-300); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.ft__nav a:hover { color: var(--marfim); }
.ft__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.ft__legal { text-align: right; font-size: 12px; line-height: 1.8; color: rgba(215,208,196,.72); }
.ft__legal p { margin: 0; }
.ft__ramo { position: absolute; right: -30px; bottom: -14px; width: 280px; color: var(--salvia); opacity: .16; }

/* ---------- 14. Reveal ao scroll (animation, não transition — não briga com hover) ---------- */
.js .rv:not(.is-in) { opacity: 0; }
.js .rv.is-in { animation: rise 1s var(--ease) both; }
.js [data-stagger]:not(.is-in) > * { opacity: 0; }
.js [data-stagger].is-in > * { animation: rise .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms); }
.js .serv__track.is-in > .sv { animation-delay: calc(var(--i, 0) * 120ms); }

/* ---------- 15. Responsivo ---------- */
@media (max-width: 1300px) {
  .hero__name strong { font-size: 22px; }
}
@media (max-width: 1100px) {
  .hd__nav > a:not(.btn) { display: none; }
  .hd__nav { gap: 16px; }
}
@media (max-width: 960px) {
  :root { --hd-h: 72px; }
  .hd__nav { display: none; }
  .burger { display: inline-flex; }
  .sobre__grid { grid-template-columns: 1fr; }
  .sobre__visual { order: -1; max-width: 520px; margin-inline: auto; width: 100%; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(2)::after { display: none; }
  .ft__grid { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 28px; }
  .ft__legal { text-align: center; }
}
@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; padding: 16px 16px 28px; }
  .split__media { aspect-ratio: 4 / 3.6; margin-bottom: 8px; }
  .split__body { padding: 0 8px; }
  .cards3 { grid-template-columns: 1fr; }
  .card-d { padding: 28px 26px 30px; }
  .serv__head { grid-template-columns: 1fr; }
  .serv__nav { padding-bottom: 0; }
  .serv__line { display: none; }
  .hd__brand span { display: none; }
  .mq__band { height: 50px; }
  .final__bg { object-position: 88% 40%; opacity: .55; }
  .final__veil { background: linear-gradient(180deg, var(--grafite-900) 0%, rgba(31,28,34,.82) 30%, rgba(31,28,34,.82) 75%, var(--grafite-950) 100%); }
  .mq__item { font-size: 11px; padding: 0 18px; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .step:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -15px; translate: -50% 0; rotate: 135deg; }
  .step:nth-child(2)::after { display: block; }
  .btn--lg { padding: 12px 12px 12px 24px; font-size: 14px; gap: 12px; }
  .btn--lg .btn__ic { width: 38px; height: 38px; }
  .sobre__seal { width: 84px; height: 84px; right: -8px; top: 30%; }
  .sobre__seal img { width: 56px; }
}

/* telas largas: os 5 serviços cabem — linha centralizada, sem carrossel nem setas */
@media (min-width: 1680px) {
  .serv__track {
    display: grid; grid-template-columns: repeat(5, minmax(0, 318px)); justify-content: center; gap: 22px;
    width: min(100% - 2 * var(--pad), 1720px); margin-inline: auto; padding: 10px 0 30px;
    overflow: visible; scroll-snap-type: none; cursor: default;
  }
  .sv { flex: none; }
  .serv__nav { display: none; }
}

/* ---------- Hero por faixa de tela ---------- */
/* 901–1100px: a mesma foto 16:9 a cobrir o hero inteiro; hero na altura exata da foto, texto compacto à esquerda */
@media (max-width: 1100px) and (min-width: 901px) {
  .hero { height: max(520px, calc(100vw * 9 / 16)); padding-top: var(--hd-h); }
  .hero__grid { grid-template-columns: minmax(0, 50%); }
  .hero__copy { padding: 14px 0 40px; }
  .hero__h1 { font-size: clamp(32px, 4.6vw, 48px); margin: 16px 0 14px; }
  .hero__sub { font-size: 14.5px; line-height: 1.6; margin-bottom: 22px; }
  .hero__copy .badge { font-size: 10.5px; padding: 8px 14px 8px 11px; }
  .hero__veil {
    background:
      linear-gradient(90deg, rgba(34,31,38,.9) 0%, rgba(34,31,38,.74) 30%, rgba(34,31,38,.32) 48%, rgba(34,31,38,0) 62%),
      linear-gradient(180deg, rgba(34,31,38,.45) 0%, rgba(34,31,38,0) 18%, rgba(60,56,64,0) 80%, var(--grafite) 100%);
  }
  .hero__name { left: auto !important; right: 20px; top: auto !important; bottom: 20px; padding: 0; text-align: right; }
  .hero__name::before, .hero__name::after { display: none; }
  .hero__name strong { font-size: 20px; }
  .hero__name small { font-size: 9px; }
}
/* ≤900px: retrato 4:5 em bloco no topo, texto centrado por baixo */
@media (max-width: 900px) {
  .hero { height: auto; min-height: 0; padding-top: var(--hd-h); flex-direction: column; align-items: stretch; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { position: relative; inset: auto; height: clamp(380px, 96vw, 620px); }
  .hero__photo { object-fit: cover; object-position: 50% 10%; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
  .hero__veil { background: linear-gradient(180deg, rgba(34,31,38,.3) 0%, rgba(34,31,38,0) 25%, rgba(34,31,38,0) 62%, #2E2A33 100%); }
  .hero__name { position: absolute; left: 0 !important; right: 0; top: auto !important; bottom: 8px; padding: 0; margin: 0; text-align: center; white-space: normal; }
  .hero__name::before, .hero__name::after { display: none; }
  .hero__name strong { font-size: 22px; }
  .hero__copy { padding: 26px 0 64px; text-align: center; }
  .hero__copy .badge { font-size: 10.5px; letter-spacing: .09em; padding: 9px 14px 9px 11px; }
  .hero__sub { margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .hero__h1 { font-size: clamp(36px, 6.4vw, 56px); }
}

/* ---------- 16. Acessibilidade / movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .rv:not(.is-in), .js [data-stagger]:not(.is-in) > * { opacity: 1; }
}
:focus-visible { outline: 2px solid var(--ameixa-300); outline-offset: 3px; }