/* style.css — estrutura da página: layout, componentes e seções.
   Regra da casa: aqui NÃO se escreve cor, fonte ou tamanho "na mão".
   Tudo vem de variáveis (var(--nome)): os valores base ficam em tokens.css e o tema visual
   (theme.css, carregado depois deste arquivo) troca esses valores e acrescenta os enfeites.
   Escrito "mobile first": primeiro o celular; os blocos @media (min-width: 768px) ajustam telas maiores. */

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--letter-spacing-heading);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--color-primary);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--color-primary-strong);
}

strong {
  font-weight: var(--weight-strong);
}

/* Foco visível para quem navega pelo teclado */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* em fundo escuro o contorno usa uma cor clara, para continuar visível */
.final-cta :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-focus-on-dark);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-8));
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.skip-link:focus {
  top: var(--space-4);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: var(--space-3) var(--space-5);
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.7;
  cursor: progress;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  box-shadow: var(--shadow-md);
}

.btn--primary:hover {
  background: var(--color-primary-strong);
  color: var(--color-primary-contrast);
}

.btn--accent {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-md);
}

.btn--accent:hover {
  background: color-mix(in srgb, var(--color-accent) 85%, var(--color-surface));
  color: var(--color-accent-contrast);
}

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: currentColor;
}

.btn--ghost:hover {
  background: var(--color-primary-soft);
}

.btn--whatsapp {
  background: var(--color-whatsapp);
  color: var(--color-whatsapp-contrast);
}

.btn--whatsapp:hover {
  color: var(--color-whatsapp-contrast);
  background: color-mix(in srgb, var(--color-whatsapp) 85%, var(--color-text));
}

.btn--small {
  white-space: nowrap;
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
}

.btn--large {
  min-height: 3.5rem;
  padding: var(--space-4) var(--space-6);
  font-size: var(--fs-lg);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* ---------- Cabeçalho ---------- */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--fs-base); /* no celular, menor: o nome cabe numa linha ao lado do botão */
  font-weight: var(--weight-heading);
  line-height: 1.2;
  text-decoration: none;
}

@media (min-width: 768px) {
  .brand {
    font-size: var(--fs-lg);
  }
}

.brand__mark {
  width: 2rem;
  height: 2rem;
  color: var(--color-primary);
}

.brand__stroke {
  stroke: var(--color-primary-contrast);
}

/* Logo do cliente em imagem (no lugar do ícone + nome) */
.brand__logo {
  width: auto;
  height: 2.75rem;
  border-radius: var(--radius-sm);
}

/* ---------- 1. Hero (topo) ----------
   O layout vem do atributo data-hero da <section class="hero"> no index.html:
   - split       texto e imagem lado a lado (o padrão)
   - arch        imagem em arco; no computador ela fica à esquerda
   - background  imagem de fundo com um véu escuro por cima e o texto claro
   - centered    tudo centralizado; a foto vira um cartão largo embaixo do botão
   Os enfeites (.hero__decor e .seal) são desenhados pelo tema visual (theme.css). */
.hero {
  position: relative;
  isolation: isolate; /* os enfeites (z-index negativo) ficam atrás do texto, mas dentro do topo */
  overflow: hidden; /* nenhum enfeite pode criar rolagem para o lado no celular */
  padding-block: var(--space-6) var(--space-7);
  background: var(--gradient-hero);
}

/* camada de enfeites do tema (manchas, malha, formas): cobre o topo inteiro, atrás do conteúdo */
.hero__decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero__grid {
  display: grid;
  gap: var(--space-6);
}

.hero__place {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--color-muted);
  font-size: var(--fs-sm);
  font-weight: var(--weight-strong);
}

.hero__place .icon {
  color: var(--color-primary);
}

.hero__title {
  max-width: 14ch;
  font-size: var(--hero-title-size);
  font-weight: var(--weight-heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--letter-spacing-heading);
}

.hero__lead {
  max-width: var(--measure);
  margin-top: var(--space-5);
  color: var(--color-muted);
  font-size: var(--fs-lg);
}

.hero__actions {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero__note {
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

.hero__media {
  position: relative;
  max-width: 26rem;
  width: 100%;
  justify-self: center;
}

.hero__media img {
  width: 100%;
  aspect-ratio: 5 / 4; /* no celular a foto fica mais baixa para o conteúdo seguinte aparecer */
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
}

.hero__badge {
  position: absolute;
  left: calc(-1 * var(--space-3));
  bottom: var(--space-5);
  display: grid;
  gap: var(--space-1);
  max-width: 15rem;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text); /* o cartão é sempre claro, mesmo com o texto do topo claro (layout background) */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.hero__badge strong {
  display: block;
}

.stars {
  color: var(--color-accent);
  letter-spacing: 0.1em;
}

/* Selo (ex.: "ATÉ 40% OFF") e faixa correndo: começam ocultos; o tema mostra o que usar
   (ex.: .seal { display: grid; } no theme.css) */
.seal,
.marquee {
  display: none;
}

/* posição padrão: no celular, canto de baixo à direita (em cima da foto, longe do texto);
   no computador, canto de cima à direita. O tema pode mudar. */
.seal {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 1;
  place-items: center;
  width: 6rem;
  aspect-ratio: 1;
  padding: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--weight-heading);
  line-height: 1.1;
  text-align: center;
  pointer-events: none;
}

@media (min-width: 768px) {
  .hero {
    padding-block: var(--space-7) var(--space-8);
  }

  .hero__grid {
    grid-template-columns: 7fr 5fr;
    align-items: center;
    gap: var(--space-7);
  }

  .hero__media {
    justify-self: end;
  }

  .hero__media img {
    aspect-ratio: 640 / 760;
  }

  .hero__badge {
    left: calc(-1 * var(--space-6));
  }

  .seal {
    top: var(--space-5);
    right: var(--space-5);
    bottom: auto;
  }
}

/* Layout "arch": foto com o topo em arco */
.hero[data-hero="arch"] .hero__media {
  max-width: 18rem;
}

.hero[data-hero="arch"] .hero__media img {
  aspect-ratio: 1;
  border-radius: var(--radius-full) var(--radius-full) var(--radius-lg) var(--radius-lg);
}

@media (min-width: 768px) {
  .hero[data-hero="arch"] .hero__grid {
    grid-template-columns: 5fr 7fr;
  }

  .hero[data-hero="arch"] .hero__media {
    order: -1; /* a foto vai para a coluna da esquerda */
    max-width: 26rem;
    justify-self: start;
  }

  .hero[data-hero="arch"] .hero__media img {
    aspect-ratio: 4 / 5;
  }

  /* o cartão de avaliação sai pela direita da foto (para o lado do texto) */
  .hero[data-hero="arch"] .hero__badge {
    left: auto;
    right: calc(-1 * var(--space-6));
  }
}

/* Layout "background": a foto cobre o topo inteiro, com um véu escuro para o texto claro ficar legível */
.hero[data-hero="background"] {
  padding-block: var(--space-7) calc(var(--space-7) + 5rem); /* espaço embaixo para o cartão de avaliação */
  color: var(--color-ink-contrast);
}

.hero[data-hero="background"] .hero__media {
  position: absolute;
  inset: 0;
  z-index: -2; /* atrás dos enfeites (.hero__decor) e do texto */
  max-width: none;
}

.hero[data-hero="background"] .hero__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

/* o véu: a cor escura do tema (--color-ink) meio transparente por cima da foto.
   Fica num elemento só dele (<span class="hero__veil"> dentro da foto), que os temas podem
   recolorir (background) mas nunca esconder. Nos outros layouts ele não aparece. */
.hero__veil {
  display: none;
}

.hero[data-hero="background"] .hero__veil {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-ink) 78%, transparent),
    color-mix(in srgb, var(--color-ink) 90%, transparent)
  );
}

/* aqui a foto é o fundo: enfeites que o tema prende na foto (.hero__media::before/::after,
   como molduras e formas) não fazem sentido e ficam desligados */
.hero[data-hero="background"] .hero__media::before,
.hero[data-hero="background"] .hero__media::after {
  content: none;
}

.hero[data-hero="background"] .hero__place,
.hero[data-hero="background"] .hero__place .icon,
.hero[data-hero="background"] .hero__lead,
.hero[data-hero="background"] .hero__note {
  color: inherit;
}

.hero[data-hero="background"] :focus-visible {
  outline-color: var(--color-focus-on-dark);
}

/* o cartão de avaliação fica no canto de baixo, alinhado com o texto */
.hero[data-hero="background"] .hero__badge {
  z-index: 1; /* por cima do véu */
  left: max(var(--space-5), calc((100% - var(--container)) / 2 + var(--space-5)));
  right: auto;
  bottom: var(--space-5);
}

@media (min-width: 768px) {
  .hero[data-hero="background"] {
    display: grid;
    align-content: center;
    min-height: min(88vh, 46rem);
    padding-block: var(--space-8) calc(var(--space-8) + 4rem);
  }

  .hero[data-hero="background"] .hero__grid {
    grid-template-columns: minmax(0, 40rem);
  }
}

/* Layout "centered": texto centralizado; a foto vira um cartão largo e mais baixo, embaixo do botão,
   com o cartão de avaliação encostado na borda de baixo. (A foto continua sendo baixada com prioridade,
   então ela aparece em vez de ficar escondida. Se usar este layout de vez, prefira uma foto deitada.) */
.hero[data-hero="centered"] {
  padding-bottom: calc(var(--space-7) + var(--space-6)); /* espaço para o cartão de avaliação */
  text-align: center;
}

.hero[data-hero="centered"] .hero__grid {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.hero[data-hero="centered"] .hero__title {
  max-width: 18ch;
  margin-inline: auto;
}

.hero[data-hero="centered"] .hero__lead {
  margin-inline: auto;
}

.hero[data-hero="centered"] .hero__place {
  justify-content: center;
}

.hero[data-hero="centered"] .hero__actions {
  justify-items: center;
}

.hero[data-hero="centered"] .hero__media {
  max-width: 40rem;
  justify-self: center;
  margin-top: var(--space-2);
}

.hero[data-hero="centered"] .hero__media img {
  aspect-ratio: 16 / 10;
  object-position: 50% 30%; /* numa foto em pé, mostra a parte de cima (onde costuma estar o rosto) */
}

/* o cartão de avaliação fica centralizado, metade para fora da borda de baixo da foto */
.hero[data-hero="centered"] .hero__badge {
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--space-6));
  width: max-content;
  max-width: calc(100% - 2 * var(--space-4));
  margin-inline: auto;
  justify-items: center;
}

/* o selo: no celular ele entra no fluxo, centralizado no alto do topo (assim não cobre o texto
   nem o cartão de avaliação); no computador volta para o canto de cima à direita */
.hero[data-hero="centered"] .seal {
  position: relative;
  right: auto;
  bottom: auto;
  width: 5rem;
  margin: 0 auto var(--space-4);
}

@media (min-width: 768px) {
  .hero[data-hero="centered"] {
    padding-bottom: calc(var(--space-8) + var(--space-5));
  }

  .hero[data-hero="centered"] .seal {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    width: 6rem;
    margin: 0;
  }
}

/* ---------- 2. Barra de prova ---------- */
.proof {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.proof__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5) var(--space-4);
  padding: var(--space-6) 0;
  margin: 0;
  list-style: none;
}

.proof__list li {
  display: grid;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.proof__list strong {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--weight-heading);
  line-height: 1.1;
}

@media (min-width: 768px) {
  .proof__list {
    grid-template-columns: repeat(4, 1fr);
  }

  .proof__list li + li {
    padding-left: var(--space-5);
    border-left: 1px solid color-mix(in srgb, var(--color-primary-contrast) 30%, transparent);
  }
}

/* números que sobem (data-count-to): algarismos de largura igual, para o texto não "tremer" */
[data-count-to] {
  font-variant-numeric: tabular-nums;
}

/* Faixa correndo (oculta por padrão, veja .seal, .marquee no Hero). O tema mostra e anima o trilho,
   por exemplo com transform: translateX(-50%): como os itens vêm duas vezes, a volta não tem emenda. */
.marquee {
  overflow: hidden; /* o trilho é mais largo que a tela; o que sobra fica escondido */
  padding-block: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--color-primary-contrast) 30%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
}

.marquee__item {
  padding-inline-end: var(--space-6); /* espaço no fim de cada item (em vez de gap) para o -50% fechar certinho */
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  white-space: nowrap;
}

/* ---------- Seções (padrão) ---------- */
.section {
  padding-block: var(--space-8);
}

.section--alt {
  background: var(--color-surface-alt);
}

.section--tight {
  padding-block: var(--space-7);
}

.section__title {
  max-width: 22ch;
  font-size: var(--fs-2xl);
  font-weight: var(--weight-heading);
}

.section__lead {
  max-width: var(--measure);
  margin-top: var(--space-4);
  color: var(--color-muted);
  font-size: var(--fs-lg);
}

/* ---------- 3. Problema → solução ---------- */
.split {
  display: grid;
  gap: var(--space-6);
}

.compare {
  display: grid;
  gap: var(--space-4);
}

.compare__col {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
}

.compare__col--before {
  border: 1px dashed var(--color-border);
  color: var(--color-muted);
}

.compare__col--after {
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-md);
}

.compare__title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-lg);
  color: var(--color-text);
}

.compare__list,
.offer__list {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.compare__list li,
.offer__list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.compare__list .icon,
.offer__list .icon {
  margin-top: 0.2em;
}

.compare__col--before .icon {
  color: var(--color-error);
}

.compare__col--after .icon,
.offer__list .icon {
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .split {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-7);
    align-items: start;
  }

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

/* ---------- 4. Benefícios ---------- */
.features {
  display: grid;
  gap: var(--space-6) var(--space-6);
  margin-top: var(--space-7);
  padding: 0;
  list-style: none;
}

.feature {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  align-content: start;
}

.feature__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.feature__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.feature__title {
  font-size: var(--fs-lg);
}

.feature p {
  color: var(--color-muted);
}

@media (min-width: 768px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Cartão com id (ex.: #sofa) usado como destino de link: não fica escondido atrás do cabeçalho fixo */
.feature[id] {
  scroll-margin-top: var(--space-8);
}

/* ---------- Galeria de trabalhos (antes e depois) ---------- */
.works {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding: 0;
  list-style: none;
}

.works + .works {
  margin-top: var(--space-5);
}

.work {
  margin: 0;
}

.work img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.work figcaption,
.work__caption {
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 768px) {
  .works--pair {
    max-width: 44rem;
  }

  .works--grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .features {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- 5. Como funciona (passos numerados) ---------- */
.steps {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-7);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  padding-left: calc(3rem + var(--space-4));
  counter-increment: step;
}

.step::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--weight-heading);
}

/* linha ligando os passos */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 3.5rem;
  bottom: calc(-1 * var(--space-5));
  border-left: 2px dashed var(--color-border);
}

.step__title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-lg);
  padding-top: var(--space-2);
}

.step p {
  color: var(--color-muted);
  max-width: var(--measure);
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }

  .step {
    padding-left: 0;
    padding-top: calc(3rem + var(--space-4));
  }

  .step:not(:last-child)::after {
    left: 3.5rem;
    right: calc(-1 * var(--space-5));
    top: 1.5rem;
    bottom: auto;
    border-left: 0;
    border-top: 2px dashed var(--color-border);
  }
}

/* ---------- 6. Depoimentos ---------- */
.quotes {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.quote {
  display: grid;
  gap: var(--space-5);
  align-content: space-between;
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.quote blockquote {
  font-size: var(--fs-base);
}

.quote--featured {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  box-shadow: var(--shadow-lg);
}

.quote--featured blockquote {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.3;
}

.quote__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.quote__author img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
}

.quote__author strong {
  display: block;
}

.quote__meta {
  color: var(--color-muted);
}

.quote--featured .quote__meta {
  color: inherit;
  opacity: 0.85;
}

@media (min-width: 768px) {
  .quotes {
    grid-template-columns: repeat(2, 1fr);
  }

  .quote--featured {
    grid-row: span 2;
    padding: var(--space-6);
  }
}

/* ---------- 7. Oferta ---------- */
.offer {
  display: grid;
  gap: var(--space-6);
}

.offer__card {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 6px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.offer__price {
  display: grid;
  color: var(--color-muted);
}

.offer__price strong {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: var(--weight-heading);
  line-height: 1;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .offer {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-7);
  }

  .offer__card {
    padding: var(--space-7) var(--space-6);
  }
}

/* ---------- 8. Garantia ---------- */
.guarantee {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: var(--space-5);
  border: 2px dashed var(--color-accent);
  border-radius: var(--radius-lg);
}

.guarantee__seal {
  width: 4rem;
  height: 4rem;
  color: var(--color-accent);
}

.guarantee__check {
  stroke: var(--color-accent-contrast);
}

.guarantee__title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-xl);
}

.guarantee p {
  max-width: var(--measure);
  color: var(--color-muted);
}

@media (min-width: 768px) {
  .guarantee {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-6);
  }
}

/* ---------- Formulário ---------- */
.form-wrap {
  display: grid;
  gap: var(--space-6);
}

.form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field label {
  font-weight: var(--weight-strong);
}

.field__optional {
  color: var(--color-muted);
  font-weight: 400;
}

.field input:not([type="checkbox"]) {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

/* texto de exemplo dentro do campo (ex.: "(11) 99999-9999"): cor do tema, legível também no fundo escuro */
.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

.field input:not([type="checkbox"]):focus-visible {
  border-color: var(--color-primary);
  outline-offset: 0;
}

.field input:user-invalid {
  border-color: var(--color-error);
}

.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-3);
}

.field--check input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.2em 0 0;
  accent-color: var(--color-primary);
}

.field--check label {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-muted);
}

/* Armadilha para robôs: fora da tela, mas ainda no HTML */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding: var(--space-4);
  border-left: 4px solid var(--color-error);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-error) 8%, var(--color-surface));
  color: var(--color-text);
  font-size: var(--fs-sm);
}

@media (min-width: 768px) {
  .form-wrap {
    grid-template-columns: 5fr 6fr;
    gap: var(--space-7);
    align-items: start;
  }

  .form {
    padding: var(--space-6);
  }
}

/* ---------- 9. FAQ ---------- */
.faq {
  display: grid;
  gap: var(--space-6);
}

.faq__list {
  border-top: 1px solid var(--color-border);
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__item summary {
  position: relative;
  padding: var(--space-5) var(--space-7) var(--space-5) 0;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-heading);
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

/* sinal de "+" que vira "−" quando aberto */
.faq__item summary::before,
.faq__item summary::after {
  content: "";
  position: absolute;
  right: var(--space-2);
  top: 50%;
  width: 1rem;
  height: 2px;
  background: var(--color-primary);
  transition: transform 200ms var(--ease);
}

.faq__item summary::after {
  transform: rotate(90deg);
}

.faq__item[open] summary::after {
  transform: rotate(0deg);
}

.faq__item summary:hover {
  color: var(--color-primary);
}

.faq__item p {
  max-width: var(--measure);
  padding-bottom: var(--space-5);
  color: var(--color-muted);
}

@media (min-width: 768px) {
  .faq {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-7);
    align-items: start;
  }
}

/* ---------- 10. CTA final e rodapé ---------- */
.final-cta {
  padding-block: var(--space-8);
  background: var(--color-ink);
  color: var(--color-ink-contrast);
}

.final-cta__inner {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
}

.final-cta__title {
  max-width: 18ch;
  font-size: var(--fs-3xl);
  font-weight: var(--weight-heading);
  line-height: var(--lh-tight);
}

.final-cta__lead {
  max-width: var(--measure);
  font-size: var(--fs-lg);
  opacity: 0.85;
}

.site-footer {
  padding-block: var(--space-6);
  background: var(--color-ink);
  color: var(--color-ink-contrast);
  border-top: 1px solid color-mix(in srgb, var(--color-ink-contrast) 15%, transparent);
  font-size: var(--fs-sm);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-4);
}

.site-footer a {
  color: inherit;
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Botão flutuante do WhatsApp ---------- */
.whatsapp-float {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--sticky-height) + var(--space-3));
  z-index: 50;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  background: var(--color-whatsapp);
  color: var(--color-whatsapp-contrast);
  box-shadow: var(--shadow-lg);
}

.whatsapp-float:hover {
  color: var(--color-whatsapp-contrast);
  background: color-mix(in srgb, var(--color-whatsapp) 85%, var(--color-text));
}

/* sem a barra fixa, o botão desce para o canto */
body:has(.sticky-cta[hidden]) .whatsapp-float {
  bottom: var(--space-4);
}

/* ---------- CTA fixo no rodapé (só celular) ---------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  min-height: var(--sticky-height);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

/* sai da frente enquanto o formulário está na tela (main.js coloca a classe "is-away") */
.sticky-cta.is-away {
  transform: translateY(100%);
  visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .sticky-cta {
    transition: transform 200ms var(--ease), visibility 200ms;
  }
}

/* espaço no fim da página para a barra não cobrir o rodapé */
body:has(.sticky-cta:not([hidden])) {
  padding-bottom: var(--sticky-height);
}

@media (min-width: 768px) {
  .sticky-cta {
    display: none;
  }

  body:has(.sticky-cta:not([hidden])) {
    padding-bottom: 0;
  }

  .whatsapp-float {
    right: var(--space-5);
    bottom: var(--space-5);
  }
}

/* ---------- Animação de entrada (.reveal) ----------
   O main.js coloca a classe "reveal-ready" no <html> e "is-visible" em cada item quando ele aparece.
   Sem JavaScript, para quem pediu menos movimento no sistema ou com data-motion="nenhuma",
   tudo aparece normalmente. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .reveal {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
  }

  .reveal-ready .reveal:nth-child(2) {
    transition-delay: 120ms;
  }

  .reveal-ready .reveal:nth-child(3) {
    transition-delay: 240ms;
  }

  .reveal-ready .reveal:nth-child(4) {
    transition-delay: 360ms;
  }

  .reveal-ready .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Níveis de movimento: regra central ----------
   O <html> de cada página tem data-motion="nenhuma", "sutil" ou "marcante" (o tema escolhe; dá para mudar).
   Os temas só animam transform, opacity, filter e background-position.
   Tudo o que se mexe é desligado aqui em dois casos:
   1) a pessoa pediu "menos movimento" no celular/computador (prefers-reduced-motion);
   2) a página está com data-motion="nenhuma".
   Nos dois casos a animação de entrada (.reveal) mostra os itens direto. Não apague esta regra. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

[data-motion="nenhuma"] *,
[data-motion="nenhuma"] *::before,
[data-motion="nenhuma"] *::after {
  animation: none !important;
  transition: none !important;
}

[data-motion="nenhuma"] .reveal {
  opacity: 1;
  transform: none;
}

html[data-motion="nenhuma"] {
  scroll-behavior: auto;
}

/* ---------- Páginas auxiliares (obrigado, privacidade, teste) ---------- */
.page-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-body main {
  flex: 1;
}

.page {
  padding-block: var(--space-7);
}

.page__title {
  font-size: var(--fs-2xl);
  font-weight: var(--weight-heading);
}

.page__lead {
  max-width: var(--measure);
  margin-top: var(--space-4);
  color: var(--color-muted);
  font-size: var(--fs-lg);
}

.page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Texto longo (política de privacidade) */
.prose {
  max-width: var(--measure);
}

.prose h2 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  font-size: var(--fs-xl);
}

.prose p,
.prose ul {
  margin-bottom: var(--space-3);
}

.prose ul {
  padding-left: var(--space-5);
}

.prose li {
  margin-bottom: var(--space-2);
}

/* Página de teste */
.debug-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.debug-panel {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.debug-panel h2 {
  margin-bottom: var(--space-3);
  font-size: var(--fs-lg);
}

.debug-pre {
  max-height: 20rem;
  margin: 0;
  overflow: auto;
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  font-family: ui-monospace, Consolas, monospace;
  font-size: var(--fs-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.debug-list {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.debug-ok {
  color: var(--color-success);
  font-weight: var(--weight-strong);
}

.debug-off {
  color: var(--color-muted);
}

@media (min-width: 768px) {
  .debug-grid {
    grid-template-columns: 1fr 1fr;
  }

  .debug-panel--wide {
    grid-column: 1 / -1;
  }
}