/* ============================================================
   VilaTCG — tokens globais + home
   Paleta derivada do emblema: esmalte marinho, ouro polido,
   rubi "Vila", chama âmbar.
   ============================================================ */

:root {
  --night:      #0c1222;   /* fundo profundo */
  --night-2:    #111a30;   /* fundo elevado */
  --navy:       #1a2747;   /* esmalte marinho do brasão */
  --navy-2:     #20305a;
  --plate:      #22335e;   /* placa esmaltada */
  --plate-hi:   #2c4276;

  --gold:       #e2ae49;   /* ouro polido */
  --gold-hi:    #f8dd8c;   /* brilho do ouro */
  --gold-deep:  #9c6b26;   /* bronze sombreado */

  --ruby:       #d92e5a;   /* rubi "Vila" */
  --ruby-hi:    #ff6488;
  --flame:      #f2892d;   /* chama do brasão */

  --cream:      #f4ead2;   /* pergaminho / texto principal */
  --cream-dim:  #cdc3ab;
  --muted:      #8b93ad;

  --ok:         #4ecb8d;

  --font-display: "Cinzel", serif;
  --font-body:    "Alegreya Sans", system-ui, sans-serif;

  --radius: 14px;
  --shadow-card: 0 18px 50px -12px rgba(0,0,0,.65);
  --gold-edge: linear-gradient(160deg, #f8dd8c 0%, #e2ae49 28%, #9c6b26 52%, #e2ae49 74%, #f8dd8c 100%);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--cream);
  background:
    radial-gradient(1200px 700px at 50% -10%, #223561 0%, transparent 60%),
    radial-gradient(900px 600px at 85% 110%, #2a1830 0%, transparent 55%),
    var(--night);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- utilidades ---------- */
.hide { display: none !important; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
}

.gold-text {
  background: linear-gradient(175deg, #f8dd8c 10%, #e2ae49 45%, #b97f2e 70%, #f1c86a 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   HOME
   ============================================================ */

.home-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 40px) 80px;
  position: relative;
  z-index: 1;
}

/* --- brasas flutuantes (ambiente) --- */
.embers { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.embers i {
  position: absolute;
  bottom: -12px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd98a 0%, #f2892d 55%, transparent 75%);
  opacity: 0;
  animation: ember-rise linear infinite;
}
@keyframes ember-rise {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  8%   { opacity: .8; }
  60%  { opacity: .45; }
  100% { transform: translateY(-105vh) translateX(var(--drift, 30px)) scale(.3); opacity: 0; }
}

/* --- cabeçalho / logo --- */
.home-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: clamp(12px, 3vw, 36px);
  animation: rise-in .9s cubic-bezier(.2,.8,.2,1) both;
}

.logo-img { width: min(420px, 78vw); height: auto; filter: drop-shadow(0 14px 34px rgba(0,0,0,.6)); }

.logo-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  letter-spacing: .02em;
  line-height: 1;
  text-align: center;
}
.logo-text .vila { color: var(--ruby); text-shadow: 0 2px 18px rgba(217,46,90,.45); }

.tagline {
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  color: var(--cream-dim);
  text-align: center;
  max-width: 46ch;
}

/* --- divisor heráldico --- */
.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(30px, 5vw, 54px) auto clamp(26px, 4vw, 44px);
  max-width: 560px;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}
.divider svg { width: 22px; height: 22px; flex: none; }

.choose-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  text-align: center;
  letter-spacing: .04em;
}
.choose-sub { text-align: center; color: var(--muted); margin-top: 8px; font-size: 1.02rem; }

/* --- as três cartas-opção --- */
.deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  justify-content: center;
  gap: clamp(18px, 3vw, 34px);
  margin-top: clamp(34px, 5vw, 60px);
  perspective: 1400px;
}

.tcg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 63 / 88;
  border-radius: var(--radius);
  padding: 10px;
  background: var(--gold-edge);
  /* sombra justa (spread -22): aterra o card sem espalhar para o vão estreito
     entre os dois blocos, onde antes formava uma poça escura */
  box-shadow: 0 22px 40px -22px rgba(0,0,0,.7);
  text-decoration: none;
  /* sem preserve-3d de propósito: com ele (e o translateZ do .card-inner) a
     box-shadow do card era desenhada no plano 3D e cruzava o meio do bloco.
     O tilt do hover não precisa disso — a perspectiva vem do .deck. */
  transition: transform .25s ease, box-shadow .25s ease;
  animation: card-deal .9s cubic-bezier(.2,.85,.25,1) both;
  will-change: transform;
}
.tcg-card:nth-child(1) { animation-delay: .15s; }
.tcg-card:nth-child(2) { animation-delay: .3s; }
.tcg-card:nth-child(3) { animation-delay: .45s; }

@keyframes card-deal {
  from { opacity: 0; transform: translateY(60px) rotateX(18deg) scale(.92); }
  to   { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tcg-card:hover { box-shadow: 0 30px 70px -16px rgba(0,0,0,.75), 0 0 44px -8px rgba(226,174,73,.35); }

.card-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--navy) 0%, var(--night-2) 100%);
  border: 1px solid rgba(0,0,0,.55);
  position: relative;
}

/* brilho foil que segue o ponteiro */
.foil {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(248,221,140,.28) 0%,
    rgba(217,46,90,.12) 32%,
    transparent 62%
  );
  mix-blend-mode: screen;
}
.tcg-card:hover .foil { opacity: 1; }

.card-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  letter-spacing: .03em;
  color: var(--gold-hi);
  border-bottom: 1px solid rgba(226,174,73,.28);
  background: linear-gradient(180deg, rgba(226,174,73,.12), transparent);
}
.card-name .cost {
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--night);
  background: linear-gradient(160deg, var(--gold-hi), var(--gold));
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
}
.card-name .cost.ruby { background: linear-gradient(160deg, var(--ruby-hi), var(--ruby)); color: #fff; }

.card-art {
  position: relative;
  flex: 1.25;
  min-height: 0;
  margin: 10px 12px 0;
  border-radius: 6px;
  border: 1px solid rgba(226,174,73,.35);
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--plate-hi) 0%, var(--navy) 70%),
    var(--navy);
}
/* sem drop-shadow no SVG: o filtro vazava para fora da .card-art (overflow
   hidden não o continha por causa da camada de composição do card) e formava
   uma faixa escura cruzando a descrição dos dois blocos */
.card-art svg { width: 62%; height: 62%; transition: transform .35s ease; }
.tcg-card:hover .card-art svg { transform: translateY(-4px) scale(1.05); }

.card-type {
  margin: 10px 12px 0;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-type::after { content: ""; flex: 1; height: 1px; background: rgba(139,147,173,.3); }

.card-desc {
  margin: 8px 12px;
  font-size: clamp(.88rem, 1.4vw, .98rem);
  line-height: 1.5;
  color: var(--cream-dim);
  flex: 1;
}

.card-cta {
  margin: 0 12px 14px;
  padding: 11px 14px;
  border-radius: 8px;
  text-align: center;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--night);
  background: linear-gradient(160deg, var(--gold-hi) 0%, var(--gold) 55%, #c78d33 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 16px -6px rgba(226,174,73,.6);
  transition: filter .2s ease, transform .2s ease;
}
.tcg-card:hover .card-cta { filter: brightness(1.08); transform: translateY(-1px); }
.card-cta.ruby {
  background: linear-gradient(160deg, var(--ruby-hi) 0%, var(--ruby) 60%, #9c1c3e 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px -6px rgba(217,46,90,.55);
}

/* selo "destaque" da carta central */
.holo-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--night);
  background: linear-gradient(90deg, var(--gold-hi), var(--flame), var(--gold-hi));
  background-size: 200% 100%;
  padding: 5px 16px;
  border-radius: 99px;
  box-shadow: 0 6px 18px -4px rgba(242,137,45,.6);
  animation: badge-shimmer 3s linear infinite;
  white-space: nowrap;
}
@keyframes badge-shimmer { to { background-position: 200% 0; } }

/* --- h1 da home --- */
.home-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.6vw, 1.55rem);
  line-height: 1.35;
  letter-spacing: .01em;
  text-align: center;
  max-width: 24ch;
  color: var(--cream);
}

/* ============================================================
   SEÇÕES DE CONTEÚDO
   ============================================================ */
.home-section {
  margin-top: clamp(56px, 9vw, 110px);
  scroll-margin-top: 24px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.6vw, 2.1rem);
  line-height: 1.25;
  text-align: center;
  letter-spacing: .02em;
}
.section-lead {
  max-width: 62ch;
  margin: 14px auto 0;
  text-align: center;
  color: var(--cream-dim);
  font-size: clamp(.98rem, 1.7vw, 1.08rem);
  line-height: 1.6;
}

/* --- passos --- */
.steps-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(14px, 2.2vw, 22px);
  margin-top: clamp(28px, 4vw, 44px);
  counter-reset: passo;
}
.step {
  position: relative;
  padding: 26px 20px 22px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(34,51,94,.5), rgba(17,26,48,.72));
  border: 1px solid rgba(226,174,73,.22);
  transition: border-color .2s ease, transform .2s ease;
}
.step:hover { border-color: rgba(226,174,73,.5); transform: translateY(-3px); }
.step-n {
  position: absolute;
  top: -14px;
  left: 20px;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: .95rem;
  color: var(--night);
  background: linear-gradient(160deg, var(--gold-hi), var(--gold));
  box-shadow: 0 5px 14px -4px rgba(226,174,73,.6);
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--gold-hi);
  margin-bottom: 8px;
  letter-spacing: .02em;
}
.step p { color: var(--cream-dim); line-height: 1.55; font-size: .95rem; }

.section-cta { text-align: center; margin-top: clamp(26px, 4vw, 40px); }
.btn-inline {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(160deg, var(--ruby-hi) 0%, var(--ruby) 60%, #9c1c3e 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 22px -8px rgba(217,46,90,.6);
  transition: filter .2s ease, transform .2s ease;
}
.btn-inline:hover { filter: brightness(1.09); transform: translateY(-2px); }

/* --- lista de recursos --- */
.feature-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px 26px;
  margin-top: clamp(26px, 4vw, 40px);
}
.feature-list li {
  position: relative;
  padding-left: 30px;
  color: var(--cream-dim);
  line-height: 1.6;
  font-size: .97rem;
}
.feature-list li::before {
  content: "✦";
  position: absolute;
  left: 4px;
  top: 1px;
  color: var(--gold);
  font-size: .9rem;
}
.feature-list b { color: var(--cream); font-weight: 700; }

/* --- FAQ --- */
.faq-list {
  max-width: 760px;
  margin: clamp(26px, 4vw, 40px) auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-list details {
  border-radius: 12px;
  border: 1px solid rgba(226,174,73,.22);
  background: rgba(17,26,48,.6);
  overflow: hidden;
  transition: border-color .2s ease;
}
.faq-list details[open] { border-color: rgba(226,174,73,.45); }
.faq-list summary {
  cursor: pointer;
  padding: 15px 46px 15px 18px;
  font-weight: 700;
  color: var(--cream);
  position: relative;
  list-style: none;
  font-size: 1rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 1.3rem;
  line-height: 1;
  transition: transform .2s ease;
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list summary:hover { color: var(--gold-hi); }
.faq-list details p {
  padding: 0 18px 16px;
  color: var(--cream-dim);
  line-height: 1.62;
  font-size: .96rem;
}
.faq-list details a { color: var(--gold-hi); }

/* --- rodapé --- */
.home-footer {
  margin-top: clamp(50px, 8vw, 90px);
  padding-top: clamp(26px, 4vw, 40px);
  border-top: 1px solid rgba(226,174,73,.18);
  text-align: center;
  color: var(--muted);
  font-size: .88rem;
}
.home-footer b { color: var(--gold); font-weight: 700; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-bottom: 20px;
}
.footer-links a {
  color: var(--cream-dim);
  text-decoration: none;
  font-weight: 700;
  transition: color .2s ease;
}
.footer-links a:hover { color: var(--gold-hi); }
.home-footer .legal {
  max-width: 62ch;
  margin: 14px auto 0;
  font-size: .78rem;
  line-height: 1.55;
  color: #6c748c;
}
.home-footer .legal a { color: #8b93ad; text-decoration: none; }
.home-footer .legal a:hover { color: var(--gold-hi); }

/* ============================================================
   AVISO DE COOKIES (LGPD) — js/consent.js
   ============================================================ */
.consent {
  position: fixed;
  left: 50%; bottom: 16px;
  transform: translate(-50%, 130%);
  z-index: 200;                      /* acima do bichinho (45) e dos modais (50) */
  width: min(720px, calc(100vw - 24px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 15px 18px;
  border-radius: 14px;
  border: 1px solid rgba(226,174,73,.42);
  background: linear-gradient(165deg, #16203c 0%, #0e1730 100%);
  box-shadow: 0 20px 50px -14px rgba(0,0,0,.8);
  transition: transform .3s cubic-bezier(.2,.9,.3,1);
}
.consent.show { transform: translate(-50%, 0); }
.consent-txt {
  flex: 1 1 300px;
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--cream-dim);
}
.consent-txt a { color: var(--gold-hi); }
.consent-btns { display: flex; gap: 10px; margin-left: auto; }

@media (max-width: 560px) {
  .consent { bottom: 10px; padding: 14px; }
  .consent-btns { width: 100%; }
  .consent-btns .btn { flex: 1; }
}

/* ============================================================
   BANNER DO LEILÃO (home) — preenchido pelo home.js
   ============================================================ */
#leilaoBanner { max-width: 860px; margin: 28px auto 0; padding: 0 18px; }
.lei-banner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px;
  border-radius: 16px;
  text-decoration: none;
  border: 1px solid rgba(226,174,73,.4);
  background: linear-gradient(165deg, #16203c 0%, #0e1730 100%);
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .2s ease;
}
.lei-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 54px -16px rgba(0,0,0,.8), 0 0 34px -8px rgba(226,174,73,.45);
}
/* leilão no ar: moldura rubi pulsando — o destaque da página */
.lei-banner.live {
  border-color: var(--ruby);
  box-shadow: var(--shadow-card), 0 0 38px -8px rgba(217,46,90,.55);
  animation: lb-glow 2.2s ease infinite;
}
@keyframes lb-glow {
  50% { box-shadow: var(--shadow-card), 0 0 54px -6px rgba(217,46,90,.85); }
}
.lb-thumbs { display: flex; }
.lb-thumbs img {
  width: 46px; border-radius: 5px;
  border: 1px solid rgba(226,174,73,.5);
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.8);
  margin-left: -14px;
  transform: rotate(calc((var(--i) - 1) * 7deg));
  background: var(--night-2);
}
.lb-thumbs img:first-child { margin-left: 0; }
.lb-emoji { font-size: 1.7rem; }
.lb-info { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; }
.lb-live {
  font-size: .68rem; font-weight: 800; letter-spacing: .18em;
  color: var(--ruby-hi);
  animation: lb-pulse 1.2s ease infinite;
}
@keyframes lb-pulse { 50% { opacity: .45; } }
.lb-soon { font-size: .68rem; font-weight: 800; letter-spacing: .18em; color: var(--gold-hi); }
.lb-idle { font-size: .68rem; font-weight: 800; letter-spacing: .18em; color: var(--muted); }
.lb-info strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--cream); }
.lb-info small { color: var(--cream-dim); font-size: .84rem; line-height: 1.45; }
.lb-info small b { color: var(--gold-hi); }
.lb-cta { margin-left: auto; align-self: center; }
@media (max-width: 560px) {
  .lb-cta { width: 100%; margin-left: 0; text-align: center; }
}

/* ============================================================
   GRUPO DO WHATSAPP (home)
   ============================================================ */
.zap { max-width: 760px; margin: 10px auto 60px; padding: 0 18px; }
.zap-inner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid rgba(37, 211, 102, .45);
  background:
    radial-gradient(120% 150% at 12% 0%, rgba(37, 211, 102, .12), transparent 55%),
    linear-gradient(165deg, #16203c 0%, #0e1730 100%);
  box-shadow: var(--shadow-card);
}
.zap-icone { width: 42px; height: 42px; color: #25d366; flex: 0 0 auto; }
.zap-texto { flex: 1 1 260px; display: flex; flex-direction: column; gap: 3px; }
.zap-texto b { font-family: var(--font-display); font-size: 1.08rem; color: var(--cream); }
.zap-texto span { color: var(--cream-dim); font-size: .9rem; line-height: 1.5; }
.zap-btn {
  margin-left: auto;
  padding: 11px 20px;
  border-radius: 9px;
  text-decoration: none;
  font-weight: 800; font-size: .95rem;
  color: #06281a;
  background: linear-gradient(160deg, #43e07e 0%, #25d366 60%, #1aab52 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px -6px rgba(37, 211, 102, .55);
  transition: filter .2s ease, transform .2s ease;
}
.zap-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
@media (max-width: 560px) {
  .zap-btn { margin-left: 0; width: 100%; text-align: center; }
}

/* ---------- responsivo ---------- */
@media (max-width: 860px) {
  .deck { grid-template-columns: minmax(0, 420px); justify-content: center; }
  .tcg-card { aspect-ratio: auto; min-height: 0; }
  .card-art { flex: none; height: clamp(120px, 30vw, 180px); }
  .holo-badge { top: -12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tcg-card { transform: none !important; }
}