/* AX Consultoria · Componentes reutilizáveis
 * Vide DESIGN.md §10 pra anatomia.
 */

/* ===== Eyebrow ===== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-md);
  color: var(--color-bronze);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
}

/* ===== Botões ===== */
.btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.72rem 1.15rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.15;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.btn:focus-visible,
.field:focus-visible {
  outline: 3px solid rgb(var(--color-bronze-rgb) / 0.34);
  outline-offset: 3px;
}

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

.btn--dark {
  background: var(--color-ameixa);
  color: var(--color-pergaminho);
}

.btn--light {
  background: var(--color-pergaminho);
  color: var(--color-ameixa);
}

.btn--outline {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}

.btn--bronze {
  background: var(--color-bronze);
  color: var(--color-pergaminho);
}

.btn--ghost {
  background: transparent;
  color: inherit;
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
  position: relative;
}
.btn--ghost::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  transition: opacity 180ms ease, background-color 180ms ease;
}
.btn--ghost:hover::after { opacity: 1; background: var(--color-bronze); }

.btn--sm { min-height: 36px; padding: 0.5rem 0.9rem; font-size: 0.86rem; }
.btn--lg { min-height: 52px; padding: 0.95rem 1.5rem; font-size: 1rem; }

.btn[aria-disabled="true"] {
  opacity: 0.42;
  pointer-events: none;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* ===== Cards ===== */
.card {
  min-height: 100%;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: rgb(var(--color-pergaminho-rgb) / 0.62);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.card:hover {
  box-shadow: var(--shadow-hover);
  border-color: rgb(var(--color-bronze-rgb) / 0.32);
}

.card--quiet {
  background: transparent;
  border-color: rgb(var(--color-ameixa-rgb) / 0.14);
}

.card--ink {
  background: var(--color-ameixa);
  color: var(--color-pergaminho);
  border: var(--border-dark);
}
.card--ink h3 { color: var(--color-pergaminho); }

.card--rule {
  border-color: rgb(var(--color-bronze-rgb) / 0.45);
}

.card--numeral {
  background: var(--color-pergaminho);
}
.card--numeral .card__index {
  font-size: 3rem;
  margin-bottom: var(--space-md);
}

.card__index {
  display: block;
  margin-bottom: var(--space-lg);
  color: var(--color-bronze);
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
}

.card p {
  color: rgb(var(--color-ameixa-rgb) / 0.68);
}
.card p:last-child {
  margin-bottom: 0;
}
.card--ink p {
  color: rgb(var(--color-pergaminho-rgb) / 0.72);
}

/* ===== Ícones ===== */
.icon {
  display: inline-block;
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
  color: currentColor;
  vertical-align: middle;
}
.icon svg { display: block; width: 100%; height: 100%; }
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }
.icon--bronze { color: var(--color-bronze); }

/* ===== Formulário editorial (filete bronze, sem caixas) ===== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem) var(--space-xl);
}

.field-group {
  display: grid;
  gap: var(--space-xs);
  position: relative;
}
.field-group--full {
  grid-column: 1 / -1;
}

label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-bronze);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

label .icon {
  flex-shrink: 0;
}

.field {
  width: 100%;
  padding: 0.4rem 0 0.6rem;
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--color-ameixa);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgb(var(--color-ameixa-rgb) / 0.22);
  border-radius: 0;
  transition: border-color 200ms ease;
}

.field:hover {
  border-bottom-color: rgb(var(--color-ameixa-rgb) / 0.45);
}

.field:focus-visible {
  outline: 0;
  border-bottom-color: var(--color-bronze);
  border-bottom-width: 2px;
  padding-bottom: calc(0.6rem - 1px);
}

.field::placeholder {
  color: rgb(var(--color-ameixa-rgb) / 0.32);
  font-size: 0.92rem;
}

textarea.field {
  resize: vertical;
  min-height: 96px;
  line-height: 1.55;
}

select.field {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239A7742' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 12px 8px;
  padding-right: 1.75rem;
  cursor: pointer;
}

.form-note {
  margin: 0;
  color: rgb(var(--color-ameixa-rgb) / 0.58);
  font-size: 0.88rem;
}

/* ===== FAQ (padrão Clickhouse adaptado, ver DESIGN.md §10) ===== */
.faq-list {
  display: grid;
  gap: var(--space-sm);
}

.faq-item {
  position: relative;
  background: var(--color-pergaminho);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.faq-item:hover {
  background: rgb(var(--color-pergaminho-rgb) / 0.65);
  border-color: rgb(var(--color-bronze-rgb) / 0.32);
}

.faq-item summary {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  cursor: pointer;
  color: var(--color-ameixa);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.4;
  list-style: none;
  transition: color 0.25s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }

.faq-item:hover summary {
  color: var(--color-bronze);
}

.faq-item summary > .faq-num {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: var(--space-md);
  min-width: calc(2ch + var(--space-md) * 2);
  color: rgb(var(--color-ameixa-rgb) / 0.5);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  line-height: 1;
  font-weight: 400;
}

.faq-item summary > .faq-q {
  padding: var(--space-md);
}

.faq-item summary > .faq-toggle {
  margin-right: var(--space-md);
}

/* Toggle plus → minus */
.faq-item .faq-toggle {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--color-bronze);
}
.faq-item .faq-toggle::before,
.faq-item .faq-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.5s var(--motion-ease-soft), opacity 0.5s ease;
}
.faq-item .faq-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq-item[open] .faq-toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}
.faq-item.is-closing .faq-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 1;
}

/* Divisor vertical: respeita padding */
.faq-item::before {
  content: "";
  position: absolute;
  left: calc(2ch + var(--space-md) * 2);
  top: var(--space-md);
  bottom: var(--space-md);
  width: 1px;
  background: rgb(var(--color-ameixa-rgb) / 0.22);
  pointer-events: none;
}

.faq-item .faq-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.7s var(--motion-ease-soft),
    opacity 0.5s var(--motion-ease-soft);
}
.faq-item[open] .faq-body {
  grid-template-rows: 1fr;
  opacity: 1;
}
.faq-item.is-closing[open] .faq-body {
  grid-template-rows: 0fr;
  opacity: 0;
}
.faq-item .faq-body > div {
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.faq-item .faq-body p {
  max-width: 720px;
  margin: 0 var(--space-md) var(--space-md) calc(2ch + var(--space-md) * 2 + var(--space-md));
  color: rgb(var(--color-ameixa-rgb) / 0.78);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* ===== WhatsApp FAB (botão flutuante de contato) ===== */
.whatsapp-fab {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.5rem);
  bottom: clamp(1rem, 2.5vw, 1.5rem);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.85rem 1.1rem;
  background: var(--color-ameixa);
  color: var(--color-pergaminho);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid rgb(var(--color-pergaminho-rgb) / 0.14);
  border-radius: var(--radius-pill);
  box-shadow:
    0 8px 24px -10px rgb(0 0 0 / 0.45),
    inset 0 1px 0 rgb(var(--color-pergaminho-rgb) / 0.12);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px -10px rgb(0 0 0 / 0.55),
    inset 0 1px 0 rgb(var(--color-pergaminho-rgb) / 0.18);
}

.whatsapp-fab .icon {
  flex-shrink: 0;
}

.whatsapp-fab__label {
  display: inline-block;
}

@media (max-width: 540px) {
  .whatsapp-fab {
    padding: 0.85rem;
  }
  .whatsapp-fab__label {
    display: none;
  }
}

/* ===== Link com seta (saiba mais / leia mais) ===== */
.section__more {
  margin: var(--space-xl) 0 0;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: currentColor;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.96rem;
  border-bottom: 1px solid rgb(var(--color-bronze-rgb) / 0.5);
  padding-bottom: 2px;
  transition: color 200ms ease, border-color 200ms ease, gap 200ms ease;
}

.link-arrow .icon {
  transition: transform 200ms ease;
}

.link-arrow:hover,
.link-arrow:focus-visible {
  color: var(--color-bronze);
  border-bottom-color: var(--color-bronze);
  gap: var(--space-sm);
}

.link-arrow:hover .icon,
.link-arrow:focus-visible .icon {
  transform: translateX(2px);
}

/* ===== Carousel dots (indicador de scroll horizontal mobile) ===== */
.carousel-dots {
  display: none;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.carousel-dots__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgb(var(--color-ameixa-rgb) / 0.18);
  transition: width 240ms ease, background 240ms ease;
}

.carousel-dots__dot[data-active] {
  width: 22px;
  background: var(--color-bronze);
}

@media (max-width: 768px) {
  .carousel-dots {
    display: flex;
  }
}

/* ===== Botão sólido (fundo claro) ===== */
.btn--solid {
  background: var(--color-ameixa);
  color: var(--color-pergaminho);
  border-color: var(--color-ameixa);
}
.btn--solid:hover,
.btn--solid:focus-visible {
  background: var(--color-tinta);
  border-color: var(--color-tinta);
  color: var(--color-pergaminho);
}

/* ===== Form extras ===== */
.field-radio-group {
  display: flex;
  flex-direction: column;
  border: 0;
  padding: 0;
  margin: 0;
}
.field-radio-group legend {
  margin-bottom: var(--space-md);
  color: var(--color-bronze);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.field-radio-options {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  background: rgb(var(--color-ameixa-rgb) / 0.05);
  border-radius: var(--radius-pill);
  align-self: flex-start;
}

.field-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.92rem;
  color: rgb(var(--color-ameixa-rgb) / 0.72);
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-pill);
  transition: background 200ms ease, color 200ms ease;
}
.field-radio:hover {
  color: var(--color-ameixa);
}
.field-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.field-radio:has(input:checked) {
  background: var(--color-ameixa);
  color: var(--color-pergaminho);
}
.field-radio:has(input:focus-visible) {
  outline: 2px solid var(--color-bronze);
  outline-offset: 2px;
}

.field-honeypot {
  position: absolute;
  left: -10000px;
  opacity: 0;
  pointer-events: none;
  height: 0;
  width: 0;
  overflow: hidden;
}

.form-feedback {
  margin: var(--space-md) 0 0;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
}
.form-feedback[data-state="success"] {
  background: rgb(var(--color-bronze-rgb) / 0.12);
  border: 1px solid rgb(var(--color-bronze-rgb) / 0.35);
  color: var(--color-ameixa);
}
.form-feedback[data-state="error"] {
  background: rgb(255 80 80 / 0.08);
  border: 1px solid rgb(255 80 80 / 0.35);
  color: var(--color-ameixa);
}

/* ===== Contato (página /contato/) ===== */
/* Contato em fundo branco (override do .section--lift padrão). */
.section--lift:has(.contact-grid) {
  background: #ffffff;
}

.contact-grid {
  max-width: 720px;
  margin: 0 auto;
}

.contact-direct {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding-top: var(--space-lg);
  border-top: 1px solid rgb(var(--color-ameixa-rgb) / 0.12);
  text-align: center;
  font-size: 0.94rem;
  color: rgb(var(--color-ameixa-rgb) / 0.62);
}

.contact-direct a {
  color: var(--color-ameixa);
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--color-bronze-rgb) / 0.5);
  padding-bottom: 1px;
  transition: color 200ms ease, border-color 200ms ease;
}

.contact-direct a:hover,
.contact-direct a:focus-visible {
  color: var(--color-bronze);
  border-color: var(--color-bronze);
}

.contact-direct__location {
  color: rgb(var(--color-ameixa-rgb) / 0.62);
}