/* =============================================================
   style.css — CSS residual da LP Great Group.
   Tailwind (via CDN) cobre o layout; aqui ficam animações,
   estados de JS e ajustes não cobertos por utilitários.
   ============================================================= */

:root {
  --navy: #12315e;
  --navy-deep: #0d2547;
  --lime: #a9cf45;
  --lime-dark: #7d931f;
  --ink: #1b2430;
  --muted: #5b6b82;
  --soft: #f4f6f9;
  --hair: #e3e8ef;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* compensa o header fixo nas âncoras */
}

::selection {
  background: var(--lime);
  color: var(--navy);
}

body.nav-open {
  overflow: hidden;
}

/* ---------- Régua de acento (eyebrow / títulos) ---------- */
.rule {
  display: block;
  width: 60px;
  height: 3px;
  border-radius: 3px;
  background: var(--lime);
}

/* ---------- Header: sólido ao rolar ---------- */
#site-header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
#site-header.is-scrolled {
  background-color: #ffffff;
  box-shadow: 0 6px 24px rgba(18, 49, 94, 0.08);
  border-bottom-color: var(--hair);
}

/* ---------- Menu mobile (overlay) ---------- */
#mobile-menu {
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
#mobile-menu:not(.is-open) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
}

/* ---------- Botões CTA ---------- */
.btn-cta {
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-cta:hover {
  transform: translateY(-2px);
}
.btn-cta:active {
  transform: translateY(0);
}

/* ---------- FAQ accordion ---------- */
[data-faq-trigger] .faq-chevron {
  transition: transform 0.25s ease;
}
[data-faq-trigger][aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg);
}

/* ---------- Formulário ---------- */
.field {
  margin-bottom: 1.1rem;
}
.field > label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.ctrl {
  width: 100%;
  border: 1px solid var(--hair);
  border-radius: 0.6rem;
  padding: 0.75rem 0.9rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background-color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ctrl::placeholder {
  color: #9aa7b8;
}
.ctrl:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(18, 49, 94, 0.12);
}
select.ctrl {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6B82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1rem;
  padding-right: 2.4rem;
  cursor: pointer;
}
.field-error {
  display: block;
  min-height: 1rem;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: #d64550;
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: #d64550 !important;
  box-shadow: 0 0 0 3px rgba(214, 69, 80, 0.12);
}
/* Honeypot: invisível para humanos, presente para bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
#form-progress-bar {
  transition: width 0.35s ease;
}
button[data-loading="true"] {
  opacity: 0.75;
  cursor: progress;
}

/* ---------- Hero: mockup de dashboard (placeholder visual) ---------- */
.dash-bar {
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(169, 207, 69, 0.9), rgba(169, 207, 69, 0.45));
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.40s; }

/* ---------- Acessibilidade: respeitar redução de movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}