/* ============================================================
   PROCURADOR DE ELITE — teaser
   Dourado metálico sobre preto. Mistério, poder, contenção.
   ============================================================ */

:root {
  --black:      #070707;
  --black-2:    #0d0b07;
  --ink:        #e9e2d2;
  --silver:     #b7ad98;
  --silver-dim: #7d7563;

  --gold-1: #f6e2a0;
  --gold-2: #e7c765;
  --gold-3: #c9a24b;
  --gold-4: #9c7a2e;
  --gold-deep: #6b5320;

  --gold-grad: linear-gradient(100deg, #9c7a2e 0%, #e7c765 28%, #fff6d8 48%, #e7c765 66%, #9c7a2e 100%);

  --maxw: 620px;
  --ease: cubic-bezier(.16,.84,.34,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(120% 80% at 50% -10%, #1a1407 0%, var(--black-2) 42%, var(--black) 100%);
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ---------- Atmosfera de fundo ---------- */
.bg-spotlight {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(46% 40% at 50% 30%, rgba(231,199,101,.16) 0%, rgba(231,199,101,.05) 38%, transparent 70%);
  animation: breathe 7s var(--ease) infinite;
}
.bg-vignette {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 45%, transparent 55%, rgba(0,0,0,.72) 100%);
}
.bg-grain {
  position: fixed; inset: -50%; z-index: 1; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
}

@keyframes breathe { 0%,100% { opacity:.75; } 50% { opacity:1; } }
@keyframes grain {
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-2%)}
  60%{transform:translate(-2%,4%)} 80%{transform:translate(4%,-3%)} 100%{transform:translate(0,0)}
}

/* ---------- Poeira dourada ---------- */
.dust { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.dust span {
  position: absolute;
  bottom: -10px;
  left: var(--x);
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3cf, var(--gold-3));
  opacity: 0;
  transform: scale(var(--s, .6));
  box-shadow: 0 0 6px rgba(231,199,101,.7);
  animation: rise var(--t, 16s) linear var(--d, 0s) infinite;
}
@keyframes rise {
  0%   { transform: translateY(0) scale(var(--s,.6)); opacity: 0; }
  12%  { opacity: .9; }
  88%  { opacity: .55; }
  100% { transform: translateY(-104vh) scale(var(--s,.6)); opacity: 0; }
}

/* ---------- Palco ---------- */
.stage {
  position: relative; z-index: 2;
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(48px, 9vh, 96px) 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------- Marca ---------- */
.brand { position: relative; margin-bottom: 30px; }
.brand__halo {
  position: absolute; inset: -22% -22% -10%;
  background: radial-gradient(circle, rgba(231,199,101,.30) 0%, rgba(231,199,101,.05) 50%, transparent 72%);
  filter: blur(6px);
  animation: pulse 5.5s var(--ease) infinite;
  z-index: -1;
}
@keyframes pulse { 0%,100%{ transform:scale(1); opacity:.7 } 50%{ transform:scale(1.08); opacity:1 } }
.brand__logo {
  width: clamp(190px, 46vw, 280px);
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,.65));
}

/* ---------- Selo de acesso restrito ---------- */
.eyebrow {
  font-family: "Cinzel", serif;
  font-size: clamp(.58rem, 2.6vw, .66rem);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-2);
  padding: 8px 18px;
  margin-bottom: 26px;
  border: 1px solid rgba(201,162,75,.42);
  border-radius: 2px;
  background: rgba(231,199,101,.045);
  box-shadow: 0 0 22px rgba(231,199,101,.10) inset;
}

/* ---------- Linha de escassez ---------- */
.scarcity {
  font-style: italic;
  font-size: clamp(.95rem, 3.2vw, 1.12rem);
  color: var(--gold-3);
  letter-spacing: .02em;
  margin: -34px 0 46px;
}

/* ---------- Título ---------- */
.headline {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 5.4vw, 2.55rem);
  line-height: 1.18;
  letter-spacing: .01em;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: 22px;
}
.headline__line { display: block; }
.headline__line--gold {
  background: var(--gold-grad);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 6s linear infinite;
  filter: drop-shadow(0 1px 8px rgba(231,199,101,.18));
}
@keyframes shimmer { to { background-position: 220% center; } }

/* ---------- Gancho ---------- */
.hook {
  font-style: italic;
  font-size: clamp(1.05rem, 3.4vw, 1.4rem);
  color: var(--silver);
  letter-spacing: .015em;
  max-width: 30ch;
  margin-bottom: 30px;
}

/* ---------- Régua / fechadura ---------- */
.rule {
  display: flex; align-items: center; gap: 16px;
  color: var(--gold-3);
  margin-bottom: 26px;
}
.rule__bar {
  height: 1px; width: clamp(54px, 18vw, 96px);
  background: linear-gradient(90deg, transparent, var(--gold-3));
}
.rule__bar:last-child { background: linear-gradient(90deg, var(--gold-3), transparent); }
.rule__key { filter: drop-shadow(0 0 6px rgba(231,199,101,.4)); }

/* ---------- Teaser ---------- */
.teaser {
  font-family: "Cinzel", serif;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin-bottom: 46px;
}

/* ---------- Lista de espera ---------- */
.waitlist { width: 100%; max-width: 380px; }
.waitlist__intro {
  font-style: italic;
  color: var(--silver);
  font-size: 1.08rem;
  margin-bottom: 26px;
}

.field { position: relative; margin-bottom: 26px; text-align: left; }
.field input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(183,173,152,.28);
  color: var(--ink);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.2rem;
  padding: 8px 2px 9px;
  outline: none;
  transition: border-color .4s var(--ease);
}
.field input:focus { border-bottom-color: var(--gold-2); }
.field label {
  position: absolute; left: 2px; top: 9px;
  color: var(--silver-dim);
  font-size: 1.2rem; font-style: italic;
  pointer-events: none;
  transition: all .3s var(--ease);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  top: -15px; font-size: .72rem;
  font-style: normal; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-3);
}
/* glow sutil sob o campo focado */
.field::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold-grad);
  transition: width .45s var(--ease);
}
.field:focus-within::after { width: 100%; }

/* honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- CTA ---------- */
.cta {
  position: relative; overflow: hidden;
  width: 100%;
  margin-top: 10px;
  padding: 16px 24px;
  border: 1px solid var(--gold-3);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(231,199,101,.14), rgba(156,122,46,.10));
  color: var(--gold-1);
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .35s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease), transform .15s var(--ease);
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background: var(--gold-grad); background-size: 200% auto;
  opacity: 0; transition: opacity .4s var(--ease);
  z-index: -1;
}
.cta:hover {
  color: #1a1304;
  border-color: var(--gold-1);
  box-shadow: 0 8px 34px rgba(231,199,101,.28);
}
.cta:hover::before { opacity: 1; }
.cta:active { transform: translateY(1px); }
.cta__text { position: relative; }
.cta[disabled] { opacity: .55; cursor: progress; pointer-events: none; }

.form-msg {
  min-height: 1.2em;
  margin-top: 16px;
  font-size: .98rem; font-style: italic;
  color: #e0917f;
  opacity: 0; transition: opacity .3s var(--ease);
}
.form-msg.show { opacity: 1; }

/* ---------- Sucesso ---------- */
.success { text-align: center; animation: fadeUp .8s var(--ease) both; }
.success__seal { color: var(--gold-2); margin-bottom: 18px; filter: drop-shadow(0 0 10px rgba(231,199,101,.4)); }
.success__title {
  font-family: "Cinzel", serif; font-weight: 600;
  font-size: 1.55rem; color: var(--gold-1);
  margin-bottom: 8px; letter-spacing: .02em;
}
.success__text {
  font-style: italic; color: var(--silver);
  letter-spacing: .3em; text-transform: uppercase; font-size: .8rem;
}

/* ---------- Rodapé ---------- */
.foot {
  position: relative; z-index: 2;
  text-align: center;
  padding: 26px 16px 30px;
  color: var(--silver-dim);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-family: "Cinzel", serif;
}

/* ---------- Reveal de entrada ---------- */
.reveal { opacity: 0; transform: translateY(18px); animation: fadeUp 1s var(--ease) forwards; animation-delay: var(--delay, 0s); }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* ---------- Acessibilidade / preferências ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 420px) {
  body { font-size: 17px; }
  .stage { padding-top: 40px; }
}