/* ============================================================
   Método Liderança Emocional — Landing Page
   Design tokens & signature elements (see design notes below)

   Palette
   --navy-950 #081226  --navy-900 #0E1F3D  --navy-800 #16305C
   --gold-500 #C9A227  --gold-300 #E4C765  --emerald-600 #1F7A5C
   --paper #F7F8FA  --ink #10233F  --slate #5B6B82  --line #E4E7EC

   Type
   Display: "Playfair Display" (headlines only, restrained)
   Body/UI: "Inter" (everything else, incl. tracked uppercase eyebrows)

   Signature: the "Indicador de Prontidão" gauge — a semicircular dial
   introduced in the hero (visualizing where a leader sits between
   "reativo" and "resiliente") that recurs as a thin three-stop
   gradient rule (navy → gold → emerald) used as the only divider
   between sections — a quiet callback to psychosocial-risk diagnostics
   rather than a decorative line.
   ============================================================ */

:root {
  --navy-950: #081226;
  --navy-900: #0E1F3D;
  --navy-800: #16305C;
  --navy-700: #1E3E73;
  --gold-500: #C9A227;
  --gold-300: #E4C765;
  --emerald-600: #1F7A5C;
  --emerald-500: #279970;
  --paper: #F7F8FA;
  --paper-2: #EFF2F6;
  --ink: #10233F;
  --slate: #5B6B82;
  --line: #E4E7EC;
}

* { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: 'Playfair Display', Georgia, serif; }

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-500);
}

/* Signature gradient rule — used ONLY as section divider */
.rule-signature {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--navy-900) 0%, var(--gold-500) 50%, var(--emerald-600) 100%);
  opacity: 0.9;
}

.bg-navy-950 { background-color: var(--navy-950); }
.bg-navy-900 { background-color: var(--navy-900); }
.bg-paper-2 { background-color: var(--paper-2); }
.text-gold { color: var(--gold-500); }
.text-emerald { color: var(--emerald-600); }
.text-slate-c { color: var(--slate); }
.border-line { border-color: var(--line); }

/* ---------- Buttons ---------- */
.btn-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.05rem 2.25rem;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1.02rem;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--navy-950);
  box-shadow: 0 8px 24px -8px rgba(201,162,39,0.55), 0 2px 6px rgba(8,18,38,0.25);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-cta:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 12px 30px -8px rgba(201,162,39,0.65); }
.btn-cta:active { transform: translateY(0); }
.btn-cta:focus-visible { outline: 3px solid var(--emerald-500); outline-offset: 3px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  border-radius: .5rem;
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-weight: 600;
  transition: background .18s ease, border-color .18s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.45); }
.btn-ghost:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 3px; }

/* ---------- Glass card (used sparingly: hero badge + gauge panel) ---------- */
.glass {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ---------- Book mockups (CSS-built, no external assets) ---------- */
.book {
  position: relative;
  width: 240px;
  height: 336px;
  border-radius: 4px 8px 8px 4px;
  box-shadow:
    0 30px 60px -20px rgba(8,18,38,0.45),
    0 10px 20px -8px rgba(8,18,38,0.35);
  transform: perspective(1000px) rotateY(-18deg) rotateX(2deg);
  transition: transform .5s ease;
}
.book:hover { transform: perspective(1000px) rotateY(-10deg) rotateX(1deg) translateY(-4px); }

.book::before {
  content: "";
  position: absolute;
  left: -10px; top: 6px; bottom: 6px; width: 12px;
  background: linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0.05));
  border-radius: 4px 0 0 4px;
  transform: skewY(45deg) scaleY(0.86);
  transform-origin: top left;
}

.book-primary {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(201,162,39,0.18), transparent 55%),
    linear-gradient(160deg, var(--navy-800), var(--navy-950));
  color: #fff;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.book-bonus {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(39,153,112,0.22), transparent 55%),
    linear-gradient(160deg, #123B2E, #0B211A);
  color: #fff;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 210px;
  height: 296px;
}

.book-kicker {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-300);
  font-weight: 700;
}
.book-bonus .book-kicker { color: #8FE0BE; }

.book-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  line-height: 1.2;
  margin-top: .5rem;
}
.book-bonus .book-title { font-size: 1.15rem; }

.book-mark {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: .95rem;
}

/* ---------- Readiness gauge (signature element, hero) ---------- */
.gauge {
  --v: 72; /* 0-100 */
}
.gauge svg { display: block; }
.gauge-fill {
  stroke-dasharray: 251.2;
  stroke-dashoffset: calc(251.2 - (251.2 * var(--v) / 100));
  transition: stroke-dashoffset 1.2s cubic-bezier(.22,.9,.28,1);
}

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Pain cards ---------- */
.pain-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: .85rem;
  padding: 1.75rem;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.pain-card:hover { box-shadow: 0 20px 40px -22px rgba(16,35,63,0.25); transform: translateY(-3px); border-color: rgba(201,162,39,0.4); }

/* ---------- Before/After ---------- */
.ba-col { border-radius: 1rem; padding: 2rem; }
.ba-before { background: #fff; border: 1px solid var(--line); }
.ba-after { background: linear-gradient(165deg, var(--navy-900), var(--navy-950)); color: #fff; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 0;
  font-weight: 600;
  color: var(--ink);
}
.faq-question:focus-visible { outline: 3px solid var(--emerald-500); outline-offset: 4px; }
.faq-icon { flex: none; transition: transform .3s ease; color: var(--gold-500); }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.faq-item.open .faq-answer { max-height: 320px; }
.faq-answer-inner { padding-bottom: 1.35rem; color: var(--slate); line-height: 1.65; }

/* ---------- Testimonial placeholders ---------- */
.testi-card {
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: .85rem;
  padding: 1.5rem;
}
.testi-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(160deg, var(--paper-2), #fff);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--slate);
}

/* ---------- Sticky mobile CTA ---------- */
#sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  transform: translateY(100%);
  transition: transform .35s ease;
}
#sticky-cta.show { transform: translateY(0); }

/* ---------- Utility ---------- */
.container-px { padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 768px) { .container-px { padding-left: 2rem; padding-right: 2rem; } }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--navy-950); color: #fff;
  padding: .75rem 1rem; z-index: 100; border-radius: 0 0 .5rem 0;
}
.skip-link:focus { left: 0; }

::selection { background: var(--gold-300); color: var(--navy-950); }