:root {
  /* Bridal light theme (clean + elegante) */
  --bg: #fbfbfd;
  --text: rgba(20, 20, 20, 0.92);
  --muted: rgba(20, 20, 20, 0.7);
  --muted2: rgba(20, 20, 20, 0.54);
  --line: rgba(20, 20, 20, 0.12);

  /* Champagne (dourado suave) */
  --accent: #caa46a;
  --accent2: #f1ddbf;
  --accentRgb: 202, 164, 106;
  --accent2Rgb: 241, 221, 191;

  /* Layout */
  --max: 1240px;
  --gutter: clamp(16px, 3vw, 30px);
  --sectionPadY: clamp(52px, 7.6vw, 108px);

  /* Sombras (mais leves no fundo branco) */
  --shadowSoft: 0 18px 48px rgba(0, 0, 0, 0.1);
  --shadowHard: 0 24px 70px rgba(0, 0, 0, 0.16);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: radial-gradient(
      1000px 700px at 18% 8%,
      rgba(var(--accentRgb), 0.16),
      transparent 62%
    ),
    radial-gradient(
      900px 600px at 82% 18%,
      rgba(var(--accent2Rgb), 0.22),
      transparent 60%
    ),
    radial-gradient(
      1100px 900px at 50% 120%,
      rgba(var(--accentRgb), 0.1),
      transparent 66%
    ),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
  letter-spacing: -0.01em;
  line-height: 1.55;
  overflow-x: hidden;
}
a {
  color: inherit;
}

/* ===== NAV (estrutura Thux) ===== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(20, 20, 20, 0.1);
}
.navInner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 160px;
}
.mark {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(233, 199, 138, 0.95),
    rgba(255, 217, 179, 0.75)
  );
  box-shadow: 0 10px 28px rgba(233, 199, 138, 0.18);
  display: grid;
  place-items: center;
  color: #111;
  font-weight: 800;
  font-family: "Playfair Display", serif;
  flex: 0 0 auto;
}
.brand b {
  display: block;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.brand span {
  display: block;
  color: var(--muted2);
  font-size: 11.5px;
  margin-top: 2px;
}
.links {
  display: none;
  gap: 22px;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
  color: rgba(20, 20, 20, 0.72);
  white-space: nowrap;
}
.links a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  opacity: 0.95;
}
.links a:hover {
  border-bottom-color: rgba(20, 20, 20, 0.25);
  opacity: 1;
}

@media (min-width: 980px) {
  .links {
    display: flex;
  }
}

.navRight {
  display: flex;
  gap: 10px;
  align-items: center;
}

.tone {
  display: none;
  gap: 6px;
  align-items: center;
  border: 1px solid rgba(20, 20, 20, 0.12);
  background: rgba(255, 255, 255, 0.72);
  padding: 6px;
  border-radius: 999px;
}
@media (min-width: 980px) {
  .tone {
    display: flex;
  }
}
.tone button {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--muted2);
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 11.5px;
  transition: 0.18s ease;
  white-space: nowrap;
}
.tone button[aria-pressed="true"] {
  background: rgba(233, 199, 138, 0.18);
  color: var(--text);
}

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(20, 20, 20, 0.14);
  text-decoration: none;
  font-weight: 900;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.72);
  transition: 0.18s ease;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}
.btn.primary {
  background: linear-gradient(
    135deg,
    rgba(var(--accentRgb), 0.96),
    rgba(var(--accent2Rgb), 0.92)
  );
  border-color: transparent;
  color: #111;
  box-shadow: 0 18px 45px rgba(var(--accentRgb), 0.18);
}
.btn:hover {
  transform: translateY(-1px);
  border-color: rgba(20, 20, 20, 0.22);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
}
.btn.primary:hover {
  filter: brightness(1.01);
}

/* ===== HERO FULL-WIDTH (estrutura Thux) + wireframe de alinhamento (tudo central + linhas) ===== */
.hero {
  min-height: 100vh;
  padding-top: 86px; /* altura do nav */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  width: 100%;
}
.hero:before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(
      900px 520px at 76% 34%,
      rgba(233, 199, 138, 0.18),
      transparent 60%
    ),
    radial-gradient(
      700px 440px at 92% 22%,
      rgba(255, 217, 179, 0.12),
      transparent 55%
    );
  pointer-events: none;
}
.heroInner {
  position: relative;
  width: min(var(--max), calc(100vw - (var(--gutter) * 2)));
  padding: clamp(20px, 4vw, 44px) 0;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(20, 20, 20, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(20, 20, 20, 0.8);
  font-weight: 900;
  font-size: 12px;
  margin-bottom: 18px;
}
.kicker .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 20px rgba(233, 199, 138, 0.14);
}
h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(42px, 6.2vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 16px;
}
.sub {
  margin: 0 auto;
  max-width: 74ch;
  color: var(--muted);
  font-size: clamp(15.5px, 1.35vw, 19px);
}

.wireRule {
  height: 1px;
  background: var(--line);
  width: min(520px, 100%);
  margin: 22px auto 0;
  opacity: 0.95;
}

.ctaRow {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* ===== NÚMEROS (estrutura Thux) ===== */
.numbers {
  margin-top: clamp(30px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 3vw, 34px);
  align-items: stretch;
}
@media (max-width: 720px) {
  .numbers {
    grid-template-columns: 1fr;
    text-align: left;
  }
}
.num {
  padding: 18px 18px 16px;
  border: 1px solid rgba(20, 20, 20, 0.12);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 18px;
}
.num b {
  font-family: "Playfair Display", serif;
  font-size: 40px;
  letter-spacing: -0.02em;
  display: block;
}
.num span {
  display: block;
  margin-top: 6px;
  color: var(--muted2);
  font-size: 13px;
  font-weight: 700;
}

/* ===== SEÇÕES (wireframe: uma coluna, blocos altos, linhas entre blocos) ===== */
.sectionWrap {
  width: min(var(--max), calc(100vw - (var(--gutter) * 2)));
  margin: 0 auto;
  padding: 0 0 110px;
}
.sectionRule {
  height: 1px;
  background: rgba(20, 20, 20, 0.12);
  width: 100%;
  margin: 0;
}
.section {
  padding: var(--sectionPadY) 0;
}
.section h2 {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  text-align: left;
}
.section p {
  margin: 0;
  color: var(--muted);
  max-width: 70ch;
  font-size: clamp(14.5px, 1.2vw, 17px);
}

/* Produto */
.bullets {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 840px;
}
.bullet {
  padding: 14px 14px;
  border: 1px solid rgba(20, 20, 20, 0.12);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 18px;
}
.bullet b {
  display: block;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 5px;
}
.bullet span {
  display: block;
  color: var(--muted2);
  font-size: 13px;
  font-weight: 650;
}

/* Clientes */
.gallery {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 900px;
}
@media (min-width: 980px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}
.ph {
  aspect-ratio: 4/5;
  border-radius: 18px;
  border: 1px dashed rgba(20, 20, 20, 0.2);
  background: radial-gradient(
      240px 180px at 30% 30%,
      rgba(233, 199, 138, 0.12),
      transparent 60%
    ),
    rgba(20, 20, 20, 0.02);
  display: grid;
  place-items: center;
  color: rgba(20, 20, 20, 0.55);
  font-size: 12px;
  text-align: center;
  padding: 10px;
}

/* Depoimentos (estrutura Thux: seção própria) */
.quotes {
  margin-top: 24px;
  display: grid;
  gap: 12px;
  max-width: 900px;
}
.quote {
  padding: 16px 16px;
  border: 1px solid rgba(20, 20, 20, 0.12);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 18px;
}
.quote p {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: 18px;
  line-height: 1.25;
  color: var(--text);
}
.quote span {
  display: block;
  margin-top: 10px;
  color: var(--muted2);
  font-size: 13px;
  font-weight: 750;
}

/* FAQ */
.faq {
  margin-top: 22px;
  display: grid;
  gap: 12px;
  max-width: 900px;
}
details {
  border: 1px solid rgba(20, 20, 20, 0.12);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  padding: 14px 14px;
}
summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 900;
  font-size: 13px;
}
summary::-webkit-details-marker {
  display: none;
}
.chev {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(20, 20, 20, 0.14);
  display: grid;
  place-items: center;
  color: var(--muted2);
  transition: 0.18s ease;
  background: rgba(255, 255, 255, 0.66);
  flex: 0 0 auto;
}
details[open] .chev {
  transform: rotate(180deg);
  color: var(--text);
  border-color: rgba(20, 20, 20, 0.22);
}
details p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* Footer */
footer {
  margin-top: 40px;
  padding: 26px 0 0;
  border-top: 1px solid rgba(20, 20, 20, 0.1);
  color: var(--muted2);
  font-size: 12.5px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
footer a {
  color: var(--muted2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
footer a:hover {
  border-bottom-color: rgba(20, 20, 20, 0.25);
}

/* Sticky CTA mobile */
.stickyCta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.82);
  border-top: 1px solid rgba(20, 20, 20, 0.12);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  z-index: 70;
}
.stickyCta a {
  width: min(var(--max), calc(100vw - 28px));
  justify-content: center;
}
@media (min-width: 980px) {
  .stickyCta {
    display: none;
  }
}

/* ===== Incrementos v1.5 mantendo estilo v1.4 ===== */
:root {
  --max: 1240px; /* ocupa mais tela */
  --gutter: clamp(16px, 3vw, 30px);
  --sectionPadY: clamp(52px, 7.6vw, 108px);
}

/* Overline (rótulos pequenos tipo wireframe) */
.overline {
  color: rgba(20, 20, 20, 0.62);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 14px;
  border: 1px solid rgba(20, 20, 20, 0.14);
  display: inline-flex;
  margin: 0 auto;
  padding: 1px 12px;
  border-radius: 999px;
}
.center {
  text-align: center;
}
.center .overline {
  margin-left: auto;
  margin-right: auto;
}

/* História 2 colunas (wireframe) */
.storyGrid {
  display: grid;
  grid-template-columns: 0.85fr 0.95fr;
  gap: clamp(20px, 4vw, 64px);
  align-items: center;
  width: min(var(--max), calc(100vw - (var(--gutter) * 2)));
  margin: 0 auto;
  padding: var(--sectionPadY) 0;
}
@media (max-width: 920px) {
  .storyGrid {
    grid-template-columns: 1fr;
  }
}

.storyTitle {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: clamp(40px, 5vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.storyText {
  margin: 0;
  color: var(--muted);
  max-width: 62ch;
  font-size: clamp(14.5px, 1.2vw, 17px);
}

.photoStack {
  position: relative;
  width: 100%;
  min-height: 280px;
}
.stackCard {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  border: 1px solid rgba(20, 20, 20, 0.12);
  background: radial-gradient(
      420px 280px at 30% 30%,
      rgba(233, 199, 138, 0.1),
      transparent 60%
    ),
    rgba(20, 20, 20, 0.02);
}
.stackCard.back1 {
  transform: translate(22px, 18px);
  opacity: 0.75;
}
.stackCard.back2 {
  transform: translate(40px, 34px);
  opacity: 0.45;
}
.stackImg {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, 0.14);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: var(--shadowSoft);
}
.stackImg img {
  width: 100%;
  height: clamp(260px, 36vw, 420px);
  object-fit: cover;
  display: block;
  filter: contrast(1.02) saturate(1.02);
}
@media (max-width: 920px) {
  .photoStack {
    min-height: 0;
  }
  .stackCard.back1 {
    display: none;
  }
  .stackCard.back2 {
    display: none;
  }
  .stackImg img {
    height: 320px;
  }
}

/* Produto: título central + grid 2x2 (wireframe) */
.productWrap {
  width: min(var(--max), calc(100vw - (var(--gutter) * 2)));
  margin: 0 auto;
  padding: var(--sectionPadY) 0;
  text-align: center;
}
.productTitle {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: clamp(40px, 5vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  text-align: center;
}
.productSub {
  margin: 0 auto;
  text-align: center;
  color: var(--muted);
  max-width: 70ch;
  font-size: clamp(14.5px, 1.15vw, 17px);
}
.featureGrid {
  margin-top: clamp(26px, 3.6vw, 44px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 18px);
  align-items: stretch;
}
@media (max-width: 820px) {
  .featureGrid {
    grid-template-columns: 1fr;
  }
}

.featureCard {
  border: 1px solid rgba(20, 20, 20, 0.12);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  padding: 18px 18px 16px;
  position: relative;
  overflow: hidden;
}
.featureCard:before {
  content: "";
  position: absolute;
  inset: -2px -2px auto -2px;
  height: 46%;
  background: radial-gradient(
    320px 210px at 20% 20%,
    rgba(233, 199, 138, 0.16),
    transparent 60%
  );
  pointer-events: none;
}
.featIcon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(20, 20, 20, 0.16);
  background: radial-gradient(
      20px 20px at 35% 35%,
      rgba(20, 20, 20, 0.16),
      transparent 60%
    ),
    linear-gradient(135deg, rgba(233, 199, 138, 0.4), rgba(255, 217, 179, 0.18));
  display: grid;
  place-items: center;
  font-size: 16px;
  margin: 0 auto 10px;
  position: relative;
  z-index: 1;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}
.featTitle {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  margin: 0 0 8px;
  position: relative;
  z-index: 1;
}
.featText {
  margin: 0 auto;
  text-align: center;
  color: var(--muted2);
  font-size: 13px;
  font-weight: 650;
  max-width: 44ch;
  position: relative;
  z-index: 1;
}

/* Clientes: grid de imagens real (pedido) */
.clientsWrap {
  width: min(var(--max), calc(100vw - (var(--gutter) * 2)));
  margin: 0 auto;
  padding: var(--sectionPadY) 0;
  text-align: center;
}
.clientsTitle {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: clamp(40px, 5vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}
.clientsSub {
  margin: 0 auto;
  color: var(--muted);
  max-width: 72ch;
  font-size: clamp(14.5px, 1.15vw, 17px);
}
.imgGrid {
  margin: clamp(26px, 3.6vw, 44px) auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 980px;
}
@media (min-width: 980px) {
  .imgGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.imgCell {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, 0.12);
  background: rgba(255, 255, 255, 0.66);
  aspect-ratio: 4/5;
  position: relative;
}
.imgCell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform 0.25s ease;
  filter: contrast(1.02) saturate(1.02);
}
.imgCell:hover img {
  transform: scale(1.05);
}

/* FAQ: manter estilo v1.4 mas dar mais largura */
.faqWide {
  width: min(900px, calc(100vw - (var(--gutter) * 2)));
  margin: 0 auto;
  padding: var(--sectionPadY) 0;
}
.faqWide h2 {
  text-align: center;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: clamp(40px, 5vw, 66px);
  margin: 0 0 18px;
}

/* ===== N-Versão 1: Seções de confiança (idoneidade) ===== */
.trustWrap {
  width: min(var(--max), calc(100vw - (var(--gutter) * 2)));
  margin: 0 auto;
  padding: var(--sectionPadY) 0;
}
.trustHeader {
  text-align: center;
  max-width: 78ch;
  margin: 0 auto;
}
.trustTitle {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.trustSub {
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(14.5px, 1.15vw, 17px);
}
.badgeGrid {
  margin: clamp(22px, 3vw, 34px) auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 980px;
}
@media (min-width: 980px) {
  .badgeGrid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
.badge {
  border: 1px solid rgba(20, 20, 20, 0.12);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  padding: 14px 12px 12px;
  text-align: left;
  position: relative;
  overflow: hidden;
  min-height: 92px;
}
.badge:before {
  content: "";
  position: absolute;
  inset: -2px -2px auto -2px;
  height: 52%;
  background: radial-gradient(
    320px 210px at 20% 20%,
    rgba(233, 199, 138, 0.14),
    transparent 60%
  );
  pointer-events: none;
}
.badge b {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 950;
  font-size: 12.8px;
  position: relative;
  z-index: 1;
}
.badge b .ico {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(20, 20, 20, 0.16);
  background: radial-gradient(
      18px 18px at 35% 35%,
      rgba(20, 20, 20, 0.14),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      rgba(233, 199, 138, 0.36),
      rgba(255, 217, 179, 0.14)
    );
  display: grid;
  place-items: center;
  font-size: 13px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
  flex: 0 0 auto;
}
.badge span {
  display: block;
  margin-top: 8px;
  color: var(--muted2);
  font-size: 12.8px;
  font-weight: 650;
  position: relative;
  z-index: 1;
  line-height: 1.35;
}

/* Como funciona */
.steps {
  margin: clamp(22px, 3vw, 34px) auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 980px;
}
@media (min-width: 980px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.step {
  border: 1px solid rgba(20, 20, 20, 0.12);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  padding: 16px 14px 14px;
  position: relative;
  overflow: hidden;
  min-height: 138px;
}
.step:before {
  content: "";
  position: absolute;
  inset: -2px -2px auto -2px;
  height: 46%;
  background: radial-gradient(
    320px 210px at 30% 20%,
    rgba(233, 199, 138, 0.12),
    transparent 60%
  );
  pointer-events: none;
}
.stepTop {
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.stepNum {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(233, 199, 138, 0.18);
  border: 1px solid rgba(233, 199, 138, 0.26);
  display: grid;
  place-items: center;
  color: var(--text);
  font-weight: 950;
  font-size: 12.5px;
  font-family: Inter, system-ui;
  flex: 0 0 auto;
}
.stepTitle {
  font-weight: 950;
  font-size: 12.8px;
  margin: 0;
}
.stepText {
  margin: 10px 0 0;
  color: var(--muted2);
  font-size: 12.8px;
  font-weight: 650;
  position: relative;
  z-index: 1;
  line-height: 1.45;
}

.microCta {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ===== Scroll UX (sem quebrar layout): animações suaves ===== */
html {
  scroll-behavior: smooth;
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.65s ease, transform 0.65s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* ===== UX mobile: "Empresa real" em 1 coluna (melhor leitura) ===== */
@media (max-width: 620px) {
  .badgeGrid {
    grid-template-columns: 1fr !important;
  }
  .badge {
    min-height: unset !important;
  }
  .microCta {
    gap: 12px;
  }
  .microCta .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- V2.0: Véu em pontos (header) --- */
.hero {
  position: relative;
  overflow: hidden;
}
.veilCanvas {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.68;
  mix-blend-mode: multiply;
  filter: saturate(1.02) contrast(1.02);
}
.heroInner {
  z-index: 2;
}

/* --- V2.0: Barra de progresso (muito discreta) --- */
.scrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 9999;
  background: rgba(20, 20, 20, 0.06);
  pointer-events: none;
}
.scrollBar {
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    rgba(var(--accentRgb), 0),
    rgba(var(--accentRgb), 0.85),
    rgba(var(--accentRgb), 0)
  );
  transform-origin: left center;
  opacity: 0.9;
}

/* --- V2.0: Lightbox (Nossos clientes) --- */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.72);
  padding: 18px;
}
.lightbox.isOpen {
  display: flex;
}
.lightboxCard {
  width: min(980px, 100%);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(20, 20, 20, 0.14);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadowHard);
  backdrop-filter: blur(10px);
}
.lightboxTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  gap: 10px;
  border-bottom: 1px solid rgba(20, 20, 20, 0.1);
}
.lightboxTitle {
  font: 600 13px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Arial;
  color: rgba(20, 20, 20, 0.7);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lightboxClose {
  appearance: none;
  border: 1px solid rgba(20, 20, 20, 0.14);
  background: rgba(255, 255, 255, 0.8);
  color: rgba(20, 20, 20, 0.86);
  border-radius: 999px;
  padding: 8px 10px;
  cursor: pointer;
  font: 600 12px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Arial;
}
.lightboxClose:hover {
  background: rgba(255, 255, 255, 0.95);
}
.lightboxImg {
  width: 100%;
  height: auto;
  display: block;
  background: #ffffff;
}
.clientGrid img {
  cursor: zoom-in;
}

/* --- V2.0: CTA fixo mobile (suave, fechável) --- */
.stickyCta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9997;
  padding: 10px 12px 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.82) 35%,
    rgba(255, 255, 255, 0.92)
  );
  backdrop-filter: blur(10px);
}
.stickyCta .btn {
  flex: 1;
  justify-content: center;
}
.stickyDismiss {
  width: 40px;
  flex: 0 0 40px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(20, 20, 20, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(20, 20, 20, 0.86);
  cursor: pointer;
}
.stickyDismiss:hover {
  background: rgba(20, 20, 20, 0.1);
}
@media (min-width: 900px) {
  .stickyCta {
    display: none;
  }
}
@media (max-width: 899px) {
  body {
    padding-bottom: 86px;
  } /* evita cobrir conteúdo */
}

/* --- V2.0.1: Responsivo (CTAs não quebram / mantém aspecto) --- */
@media (max-width: 620px) {
  /* Hero CTAs viram coluna e ocupam toda a largura disponível (padrão "Solicitar meu véu") */
  .ctaRow {
    width: min(520px, 100%);
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    align-items: stretch;
  }
  .ctaRow .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 620px) {
  .stickyDismiss {
    position: absolute;
    right: 6px;
    top: -8px;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
  }
  /* espaço extra para o botão de fechar não “invadir” o texto */
  .stickyCta {
    padding-top: 18px;
  }
}

/* ===== História com texto fixo + troca suave ===== */
.storySticky {
  top: calc(50% + 24px);
  transform: translateY(-50%);
}

.storyNav {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.storyDot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(20, 20, 20, 0.18);
  background: rgba(20, 20, 20, 0.08);
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.storyDot:hover {
  transform: scale(1.12);
  background: rgba(20, 20, 20, 0.12);
}

.storyDot.isActive {
  background: rgba(var(--accentRgb), 0.85);
  border-color: rgba(var(--accentRgb), 0.45);
}

.storyText {
  transition: opacity 0.32s ease, transform 0.32s ease;
}

.storyText.isChanging {
  opacity: 0;
  transform: translateY(6px);
}

#histImg {
  transition: opacity 0.32s ease, transform 0.32s ease;
  will-change: opacity, transform;
}

#histImg.isChanging {
  opacity: 0;
  transform: scale(1.01);
}

/* Mobile: sticky desliga pra não ficar estranho */
@media (max-width: 900px) {
  .storySticky {
    position: static;
    top: auto;
  }
}