/* ==========================================================================
   components.css — botões, cards, etapas, FAQ, marca d'água.
   Autoridade: specs/design.md §5–§9.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botões
   Altura mínima de toque 48px em todos.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--tap);
  padding: var(--space-16) var(--space-32);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--size-button);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  text-align: center;
  transition:
    transform  var(--dur-button) var(--ease-out),
    box-shadow var(--dur-button) var(--ease-out),
    background var(--dur-button) var(--ease-out),
    border-color var(--dur-button) var(--ease-out);
}

.btn svg { flex: none; width: 20px; height: 20px; }

/* Primário — gradiente metálico, texto quase-preto (13,8:1) */
.btn--primary {
  background: var(--gradient-gold);
  color: var(--ink);
  border: 0;
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--glow-gold); }
.btn--primary:active { transform: translateY(0); }

/* Secundário — contorno bronze */
.btn--secondary {
  background: transparent;
  border: var(--border) solid var(--gold-deep);
  color: var(--gold-light);
}
.btn--secondary:hover {
  background: rgba(247, 229, 158, .08);
  border-color: var(--gold-mid);
}
.section--light .btn--secondary,
.section--bone  .btn--secondary,
.section--white .btn--secondary { color: var(--gold-deep); }
.section--light .btn--secondary:hover,
.section--bone  .btn--secondary:hover,
.section--white .btn--secondary:hover {
  background: rgba(112, 84, 64, .06);
  border-color: var(--gold-deep);
}

/* Link terciário */
.btn--link {
  min-height: 0;
  padding: var(--space-8) 0;
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-mid);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.btn--link:hover { color: var(--gold-light); }
.section--light .btn--link,
.section--bone  .btn--link,
.section--white .btn--link { color: var(--gold-deep); }
.section--light .btn--link:hover,
.section--bone  .btn--link:hover,
.section--white .btn--link:hover { color: var(--ink); }

/* Microcopy sob o CTA principal. Nunca escrever "consulta gratuita". */
.btn-note {
  margin-top: var(--space-12);
  font-size: var(--size-caption);
  opacity: .72;
}

/* Em mobile o CTA primário ocupa a largura toda. */
@media (max-width: 767px) {
  .btn--block { display: flex; width: 100%; }

  /* Padding lateral menor: em bloco já estreito e com padding próprio,
     32px de cada lado faziam o rótulo quebrar em duas linhas. Como o
     botão é de largura total, o respiro lateral não faz falta. */
  .btn { padding-inline: var(--space-16); }
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}
@media (max-width: 767px) {
  .btn-row { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   WhatsApp flutuante
   Ícone em #1A1A1A — branco sobre o verde dá 2,0:1 e reprova. Ver design.md §2.
   -------------------------------------------------------------------------- */

.whats-fab {
  position: fixed;
  right: var(--space-24);
  bottom: var(--space-24);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--whats);
  color: var(--ink);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity    var(--dur-button) var(--ease-out),
    transform  var(--dur-button) var(--ease-out),
    visibility var(--dur-button) var(--ease-out);
}
.whats-fab.is-visible { opacity: 1; visibility: visible; transform: none; }
.whats-fab svg { width: 28px; height: 28px; }

/* Não pode cobrir os CTAs de Localização e contato final. */
@media (max-width: 767px) {
  .section--push-fab { padding-bottom: calc(var(--section-y) + 80px); }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  padding: var(--space-24);
  border-radius: var(--radius-md);
  border: var(--border) solid var(--ink-line);
  background: var(--ink-raised);
  transition:
    transform    var(--dur-card) var(--ease-out),
    border-color var(--dur-card) var(--ease-out);
}
.card:hover { transform: translateY(-4px); border-color: var(--gold-deep); }

.section--light .card,
.section--bone  .card,
.section--white .card {
  background: var(--white);
  border-color: var(--bone-200);
  box-shadow: var(--shadow-card);
}
.section--light .card:hover,
.section--bone  .card:hover,
.section--white .card:hover { border-color: var(--gold-deep); }

@media (min-width: 768px) {
  .card { padding: var(--space-32); }
}

.card__icon {
  width: 32px;
  height: 32px;
  color: var(--gold-mid);
  margin-bottom: var(--space-24);
}
.card__icon svg { width: 100%; height: 100%; stroke-width: 1.5; }
.section--light .card__icon,
.section--bone  .card__icon,
.section--white .card__icon { color: var(--gold-deep); }

.card__title { margin-bottom: var(--space-12); }
.card__text  { flex: 1; }
.card__cta   { margin-top: var(--space-24); align-self: flex-start; }

/* Card em destaque — um por grade, nunca dois. Inverte o fundo da faixa. */
.card--feature {
  position: relative;
  background: var(--ink);
  border-color: var(--ink-line);
  color: var(--bone-text);
}
.card--feature::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--gradient-gold);
}
.section--light .card--feature,
.section--bone  .card--feature,
.section--white .card--feature {
  background: var(--ink);
  border-color: var(--ink-line);
  color: var(--bone-text);
  box-shadow: none;
}
.section--light .card--feature .card__icon,
.section--bone  .card--feature .card__icon,
.section--white .card--feature .card__icon { color: var(--gold-mid); }
.section--light .card--feature .btn--link,
.section--bone  .card--feature .btn--link,
.section--white .card--feature .btn--link { color: var(--gold-mid); }
.section--light .card--feature .btn--link:hover,
.section--bone  .card--feature .btn--link:hover,
.section--white .card--feature .btn--link:hover { color: var(--gold-light); }

/* --------------------------------------------------------------------------
   Item simples (diferenciais, valores, motivos) — sem caixa, só filete
   -------------------------------------------------------------------------- */

.item {
  padding-top: var(--space-24);
  border-top: var(--border) solid var(--ink-line);
}
.section--light .item,
.section--bone  .item,
.section--white .item { border-top-color: var(--bone-200); }

.item__title { margin-bottom: var(--space-8); }

/* --------------------------------------------------------------------------
   Etapas numeradas
   Numeral em Cinzel 3rem, bronze a 40%, atrás do título.
   -------------------------------------------------------------------------- */

/* Mobile: pilha com filete vertical à esquerda.
   O numeral fica ATRÁS do título, como marca d'água — design.md §7. */

.steps { display: grid; gap: var(--space-40); }

.step {
  position: relative;
  padding-left: var(--space-32);
}

/* Filete conector */
.step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: calc(var(--space-40) * -1);
  width: 1px;
  background: var(--gradient-gold);
  opacity: .45;
}
.step:last-child::before { bottom: 0; }

.step__num {
  position: absolute;
  z-index: 0;
  top: -6px;
  left: var(--space-24);
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold-deep);
  opacity: .4;
  pointer-events: none;
  user-select: none;
}

.step__title {
  position: relative;
  z-index: 1;
  padding-top: var(--space-24);
  margin-bottom: var(--space-8);
}

.step__text { position: relative; z-index: 1; }

/* Desktop: quatro colunas, filete horizontal ligando as etapas. */
@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-32);
  }

  .step { padding-left: 0; padding-top: var(--space-32); }

  .step::before {
    left: 0;
    right: calc(var(--space-32) * -1);
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .step:last-child::before { right: 0; }

  .step__num { top: var(--space-16); left: -2px; }
  .step__title { padding-top: var(--space-32); }
}

/* --------------------------------------------------------------------------
   FAQ — sem card, linhas separadas por 1px.
   Pergunta em Cinzel; resposta sempre em Calibri.
   -------------------------------------------------------------------------- */

.faq { border-top: var(--border) solid var(--bone-200); }
.section--dark .faq,
.section--deep .faq { border-top-color: var(--ink-line); }

.faq__item { border-bottom: var(--border) solid var(--bone-200); }
.section--dark .faq__item,
.section--deep .faq__item { border-bottom-color: var(--ink-line); }

.faq__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-24) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: var(--leading-h3);
  letter-spacing: var(--track-h3);
  text-transform: uppercase;
  color: inherit;
}

.faq__icon {
  flex: none;
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: .15em;
  transition: transform var(--dur-accordion) var(--ease-out);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--gold-deep);
  transform: translateY(-50%);
}
.faq__icon::after {
  transform: translateY(-50%) rotate(90deg);
  transition: opacity var(--dur-accordion) var(--ease-out);
}
.section--dark .faq__icon::before,
.section--dark .faq__icon::after,
.section--deep .faq__icon::before,
.section--deep .faq__icon::after { background: var(--gold-mid); }

.faq__trigger[aria-expanded="true"] .faq__icon { transform: rotate(180deg); }
.faq__trigger[aria-expanded="true"] .faq__icon::after { opacity: 0; }

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-accordion) var(--ease-out);
}
.faq__panel[data-open="true"] { grid-template-rows: 1fr; }

/* Altura zero não basta: sem `visibility`, o leitor de tela lê as respostas
   fechadas e a pessoa ouve as seis de uma vez. Mesma técnica do drawer —
   troca por atraso, para não cortar a animação de fechamento. */
.faq__panel > div {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-accordion);
}
.faq__panel[data-open="true"] > div {
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.faq__answer {
  /* Nunca Cinzel aqui. */
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  max-width: var(--measure);
  padding-bottom: var(--space-24);
}

/* --------------------------------------------------------------------------
   Marca d'água — monograma atrás de Sobre e Localização.
   Desligada no mobile.
   -------------------------------------------------------------------------- */

/* `overflow: hidden` é obrigatório: a marca d'água sangra 80px à direita
   e sem isso cria scroll horizontal na página inteira. A seção recorta. */
.watermark { position: relative; isolation: isolate; overflow: hidden; }

.watermark::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 520px;
  height: 520px;
  background: var(--watermark-src, none) center / contain no-repeat;
  opacity: .04;
  pointer-events: none;
}

@media (max-width: 1023px) {
  .watermark::after { display: none; }
}

/* --------------------------------------------------------------------------
   Filete divisor solto
   -------------------------------------------------------------------------- */

.rule {
  width: 64px;
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--gradient-gold);
}
.rule--center { margin-inline: auto; }