/* ============================================================
   MyLu · Clube — assinatura (estatica, padrao Fable 5)
   Hero e fecho no mundo escuro (espresso); meio editorial creme.
   .section / .container / .btn / .field / .mylu-* vivem nos globais
   (tokens/landing/sections). Aqui so o que e do Clube.
   ============================================================ */

/* ---------- mundo escuro: hero + fecho ---------- */
.club-hero,
.club-final {
  position: relative;
  overflow: hidden;
  background: var(--espresso, #2A2018);
  color: var(--on-dark, #F6EFE1);
  isolation: isolate;
}
.club-hero .mylu-eyebrow,
.club-final .mylu-eyebrow { color: var(--gold-bright, #D9B96A); }
.club-hero em,
.club-final em { font-style: italic; color: var(--gold-bright, #D9B96A); }

/* botao fantasma sobre o escuro */
.btn--ghost.on-dark { --btn-ink: var(--on-dark, #F6EFE1); color: var(--on-dark, #F6EFE1); }
.btn--ghost.on-dark .btn-underline { background: var(--gold-bright, #D9B96A); }

/* cabecalho de secao reutilizavel */
.club-head { max-width: 42rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.club-head--center { margin-inline: auto; text-align: center; }
.club-head .mylu-h2 { margin: .35rem 0 0; }
.club-head .mylu-h2 em { font-style: italic; color: var(--ink-gold, #B0822E); }
.club-head-lead { margin: 1rem 0 0; color: var(--ink-2, rgba(42,32,24,.74)); max-width: 54ch; }
.club-head--center .club-head-lead { margin-inline: auto; }

/* ============================================================
   1. HERO
   ============================================================ */
.club-hero { padding-block: clamp(118px, 16vh, 188px) clamp(72px, 11vh, 128px); }
.club-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.club-hero-copy { max-width: 36rem; }
.club-hero-title {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: .5rem 0 0;
  color: var(--cream, #F6EFE1);
}
.club-hero-lead {
  font-family: var(--sans, "Jost", sans-serif);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.6;
  color: var(--on-dark-2, rgba(246,239,225,.72));
  margin: 1.25rem 0 0;
  max-width: 40ch;
}
.club-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4, 16px); margin-top: 2rem; }
.club-hero-note {
  font-family: var(--sans, "Jost", sans-serif);
  font-size: .82rem;
  color: var(--on-dark-2, rgba(246,239,225,.6));
  margin: 1.5rem 0 0;
}

/* visual: still-life da marca, o frasco nasce do trigo e e abracado
   pela meia-lua, sobre um pedestal de ouro (o box do mes) */
.club-hero-visual {
  position: relative;
  min-height: clamp(320px, 42vw, 460px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chv-glow {
  position: absolute;
  width: 82%; aspect-ratio: 1;
  left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,74,.26), rgba(201,162,74,.08) 42%, transparent 70%);
  pointer-events: none;
}
.chv-scene { position: relative; width: min(380px, 94%); aspect-ratio: 1 / 1; }

/* meia-luas concentricas (o motivo da roda) cradleando a cena */
.chv-arcs { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.chv-arcs path { fill: none; stroke: var(--gold, #C9A24A); stroke-width: 1.1; stroke-linecap: round; }
.chv-arcs path:nth-child(1) { opacity: .15; }
.chv-arcs path:nth-child(2) { opacity: .30; }
.chv-arcs path:nth-child(3) { stroke: var(--gold-bright, #D9B96A); stroke-width: 1.4; opacity: .55; }

/* a espiga em ouro: backdrop luminoso atras do grupo (acende via motion.js) */
.chv-crest {
  position: absolute; left: 50%; bottom: 30%; width: 40%; z-index: 2;
  transform: translateX(-50%);
  color: var(--gold, #C9A24A); opacity: .40;
  filter: drop-shadow(0 0 34px rgba(201,162,74,.34));
}
.chv-crest .espiga-slot { display: block; width: 100%; }
.chv-crest .espiga-slot svg { width: 100%; height: auto; display: block; }

/* 5 decants com etiqueta MyLu de envio, dispostos num arco (centro mais alto) */
.chv-decant { position: absolute; transform: translateX(-50%); }
.chv-decant-in { display: block; }
.chv-decant .decant { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 18px rgba(12,8,4,.55)); }
.chv-decant--3 { left: 50%; bottom: 27%; width: 17%; z-index: 5; }
.chv-decant--2 { left: 33%; bottom: 23%; width: 14.5%; z-index: 4; }
.chv-decant--4 { left: 67%; bottom: 23%; width: 14.5%; z-index: 4; }
.chv-decant--1 { left: 17%; bottom: 18%; width: 12.5%; z-index: 3; }
.chv-decant--5 { left: 83%; bottom: 18%; width: 12.5%; z-index: 3; }

.chv-dust { position: absolute; inset: 0; z-index: 6; pointer-events: none; }

/* ============================================================
   2. COMO FUNCIONA
   ============================================================ */
.how-steps {
  position: relative;
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  --how-gap: clamp(1.5rem, 3vw, 2.5rem);
  gap: var(--how-gap);
}
.how-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
/* conector botanico: graos de ouro REAIS (animaveis) de um no ao proximo */
.how-grains {
  position: absolute; z-index: 0; pointer-events: none;
  top: 23px; left: 26px; width: calc(100% + var(--how-gap)); height: 6px;
}
.how-grains .hg {
  position: absolute; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
  border-radius: 50%; background: var(--wheat-deep, #8C6722); opacity: .55;
}
.how-node {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--r-pill, 999px);
  background: var(--cream, #F6EFE1);
  border: 1px solid var(--line-gold, rgba(176,130,46,.42));
  color: var(--ink-gold, #B0822E);
  box-shadow: 0 0 0 7px var(--cream, #F6EFE1);
  margin-bottom: 1rem;
}
.how-node svg { width: 24px; height: 24px; }
.how-num {
  font-family: var(--sans, sans-serif);
  font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-gold, #B0822E);
  margin-bottom: .5rem;
}
.how-step-title {
  font-family: var(--serif, serif);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.22;
  color: var(--ink, #2A2018);
  margin: 0 0 .5rem;
}
.how-step-text {
  font-family: var(--sans, sans-serif);
  font-size: .92rem; line-height: 1.6;
  color: var(--ink-2, rgba(42,32,24,.74));
  margin: 0;
}

/* ============================================================
   3. PLANOS
   ============================================================ */
.club-plans { background: var(--cream-warm, #FBF6EC); }
.billing-toggle {
  position: relative;
  display: inline-flex;
  margin: 1.75rem auto 0;
  padding: 4px;
  border-radius: var(--r-pill, 999px);
  background: var(--cream-deep, #EBE0CB);
  border: 1px solid var(--line, rgba(42,32,24,.14));
}
.bt-opt {
  position: relative; z-index: 1;
  appearance: none; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: 0 1.25rem;
  font-family: var(--sans, sans-serif); font-weight: 500; font-size: .82rem;
  letter-spacing: .04em;
  color: var(--ink-2, rgba(42,32,24,.7));
  transition: color var(--dur-quick, .22s) var(--ease-soft, ease);
}
.bt-opt.is-on { color: var(--on-gold, #F6EFE1); }
.bt-save { font-size: .68rem; letter-spacing: .02em; opacity: .82; }
.bt-thumb {
  position: absolute; top: 4px; left: 4px; z-index: 0;
  height: calc(100% - 8px);
  border-radius: var(--r-pill, 999px);
  background: var(--wheat-deep, #8C6722);
  transition: transform var(--dur-calm, .5s) var(--ease-bloom, ease), width var(--dur-calm, .5s) var(--ease-bloom, ease);
}

.plans-grid {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.plan-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--cream, #F6EFE1);
  border: 1px solid var(--line, rgba(42,32,24,.12));
  border-radius: var(--r-lg, 16px);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  box-shadow: var(--shadow-sm, 0 8px 24px -16px rgba(42,32,24,.3));
  transition: transform var(--dur-calm,.5s) var(--ease-soft,ease), box-shadow var(--dur-calm,.5s) var(--ease-soft,ease);
}
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, 0 18px 40px -20px rgba(42,32,24,.4)); }
.plan-card > :not(.plan-mark) { position: relative; z-index: 1; }
/* espiga marca d'agua no canto */
.plan-mark { position: absolute; top: -16px; right: -20px; width: 116px; z-index: 0; color: var(--wheat, #B0822E); opacity: .06; pointer-events: none; }
.plan-mark .espiga { width: 100%; height: auto; display: block; }

/* o "mais querido": card do mundo escuro com brilho dourado */
.plan-card--featured {
  background: linear-gradient(168deg, var(--espresso-80, #3A2E22), var(--espresso, #2A2018));
  border: 1.5px solid var(--gold, #C9A24A);
  box-shadow: 0 26px 60px -26px rgba(0,0,0,.6), var(--glow-gold, 0 0 32px rgba(201,162,74,.22));
}
.plan-card--featured:hover { box-shadow: 0 30px 66px -26px rgba(0,0,0,.66), 0 0 38px rgba(201,162,74,.34); }
.plan-card--featured .plan-mark { color: var(--gold, #C9A24A); opacity: .10; }
.plan-card--featured .plan-name { color: var(--cream, #F6EFE1); }
.plan-card--featured .plan-tagline { color: var(--gold-bright, #D9B96A); }
.plan-card--featured .plan-decants { color: var(--gold-bright, #D9B96A); }
.plan-card--featured .plan-qty { color: var(--on-dark-2, rgba(246,239,225,.72)); }
.plan-card--featured .plan-price-val { color: var(--cream, #F6EFE1); }
.plan-card--featured .plan-price-cad,
.plan-card--featured .plan-price-sub { color: var(--on-dark-2, rgba(246,239,225,.72)); }
.plan-card--featured .plan-rule { background: linear-gradient(90deg, transparent, rgba(201,162,74,.5), transparent); }
.plan-card--featured .plan-perk { color: var(--on-dark-2, rgba(246,239,225,.8)); }
.plan-card--featured .plan-perk svg { color: var(--gold-bright, #D9B96A); }

.plan-seal {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .4rem;
  margin-bottom: .9rem;
  padding: .3rem .8rem;
  border-radius: var(--r-pill, 999px);
  background: var(--gold, #C9A24A);
  color: var(--espresso, #2A2018);
  font-family: var(--sans, sans-serif); font-weight: 500;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
}
.plan-name { font-family: var(--serif, serif); font-weight: 600; font-size: 1.6rem; line-height: 1.1; color: var(--ink, #2A2018); margin: 0; }
.plan-tagline { font-family: var(--serif, serif); font-style: italic; font-size: 1.05rem; color: var(--wheat-deep, #8C6722); margin: .25rem 0 0; }
.plan-qty-row { display: flex; align-items: center; gap: 10px; margin: 1.1rem 0 0; }
.plan-decants { display: inline-flex; gap: 2px; color: var(--wheat, #B0822E); flex: none; }
.plan-decants svg { display: block; }
.plan-qty { font-family: var(--sans, sans-serif); font-size: .8rem; letter-spacing: .04em; color: var(--ink-2, rgba(42,32,24,.74)); margin: 0; text-transform: uppercase; }
.plan-price { display: flex; align-items: baseline; gap: .4rem; margin: .6rem 0 0; }
.plan-price-val { font-family: var(--serif, serif); font-weight: 600; font-size: 2.6rem; line-height: 1; color: var(--ink, #2A2018); font-variant-numeric: tabular-nums; }
.plan-price-cad { font-family: var(--sans, sans-serif); font-size: .82rem; color: var(--ink-2, rgba(42,32,24,.7)); }
.plan-price-sub { font-family: var(--sans, sans-serif); font-size: .78rem; color: var(--ink-2, rgba(42,32,24,.74)); min-height: 1.1em; margin: .25rem 0 0; }
.plan-rule { display: block; height: 1px; margin: 1.4rem 0; background: linear-gradient(90deg, transparent, var(--line-gold, rgba(176,130,46,.42)), transparent); }
.plan-perks { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .7rem; }
.plan-perk { display: flex; gap: .6rem; font-family: var(--sans, sans-serif); font-size: .9rem; line-height: 1.45; color: var(--ink-2, rgba(42,32,24,.74)); }
.plan-perk svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--wheat, #B0822E); }
.plan-card .btn { margin-top: auto; width: 100%; }

.plans-fineprint { text-align: center; margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; max-width: 48ch; color: var(--ink-2, rgba(42,32,24,.74)); }

/* ============================================================
   4. DIFERENCIAIS
   ============================================================ */
.perks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
.perk-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 1rem;
  border-radius: var(--r-md, 10px);
  background: var(--cream-warm, #FBF6EC);
  border: 1px solid var(--line-gold, rgba(176,130,46,.42));
  color: var(--wheat, #B0822E);
}
.perk-mark svg { width: 22px; height: 22px; }
.perk-title { font-family: var(--serif, serif); font-weight: 600; font-size: 1.25rem; color: var(--ink, #2A2018); margin: 0 0 .4rem; }
.perk-text { font-family: var(--sans, sans-serif); font-size: .9rem; line-height: 1.55; color: var(--ink-2, rgba(42,32,24,.74)); margin: 0; }

/* ============================================================
   5. VOZES
   ============================================================ */
.club-voices { background: var(--cream-warm, #FBF6EC); }
.voices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
.voice { margin: 0; padding: clamp(1.5rem, 2.5vw, 2rem); background: var(--cream, #F6EFE1); border: 1px solid var(--line, rgba(42,32,24,.1)); border-radius: var(--r-lg, 16px); }
.voice-quote { font-family: var(--serif, serif); font-style: italic; font-size: 1.25rem; line-height: 1.4; color: var(--ink, #2A2018); margin: 0; }
.voice-quote::before { content: "\201C"; color: var(--ink-gold, #B0822E); }
.voice-quote::after { content: "\201D"; color: var(--ink-gold, #B0822E); }
.voice-by { margin-top: 1rem; font-family: var(--sans, sans-serif); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2, rgba(42,32,24,.7)); }
.voices-note { text-align: center; margin: clamp(1.5rem,3vw,2.25rem) auto 0; color: var(--ink-2, rgba(42,32,24,.74)); }

/* ============================================================
   6. FAQ
   ============================================================ */
.faq-list { max-width: 50rem; }
.faq-item { border-top: 1px solid var(--line, rgba(42,32,24,.14)); }
.faq-item:last-child { border-bottom: 1px solid var(--line, rgba(42,32,24,.14)); }
.faq-q {
  width: 100%; appearance: none; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 0; text-align: left;
  font-family: var(--serif, serif); font-weight: 500; font-size: 1.25rem;
  color: var(--ink, #2A2018);
}
.faq-ico { position: relative; flex: none; width: 16px; height: 16px; }
.faq-ico::before, .faq-ico::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--wheat, #B0822E);
  transition: transform var(--dur-quick,.22s) var(--ease-soft,ease), opacity var(--dur-quick,.22s) ease;
}
.faq-ico::before { width: 16px; height: 1.5px; transform: translate(-50%,-50%); }
.faq-ico::after { width: 1.5px; height: 16px; transform: translate(-50%,-50%); }
.faq-item.is-open .faq-ico::after { transform: translate(-50%,-50%) scaleY(0); opacity: 0; }
.faq-a { overflow: hidden; height: 0; }
.faq-a p { font-family: var(--sans, sans-serif); font-size: .95rem; line-height: 1.6; color: var(--ink-2, rgba(42,32,24,.74)); margin: 0 0 1.4rem; max-width: 60ch; }

/* ============================================================
   7. CTA FINAL (escuro)
   ============================================================ */
.club-final { text-align: center; padding-block: clamp(96px, 13vh, 160px); }
.club-final-inner { display: flex; flex-direction: column; align-items: center; }
.club-final-emblem { display: block; width: clamp(76px, 10vw, 112px); margin-bottom: 1.5rem; color: var(--gold, #C9A24A); filter: drop-shadow(0 0 28px rgba(201,162,74,.3)); }
.club-final-emblem .espiga-slot { display: block; width: 100%; }
.club-final-emblem .espiga-slot svg { width: 100%; height: auto; display: block; }
.club-final-title {
  font-family: var(--serif, serif); font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.06;
  color: var(--cream, #F6EFE1);
  margin: .4rem 0 0; max-width: 18ch;
}
.club-final-lead { font-family: var(--sans, sans-serif); font-size: 1.05rem; line-height: 1.6; color: var(--on-dark-2, rgba(246,239,225,.72)); margin: 1.1rem 0 0; max-width: 42ch; }
.club-final-cta { margin-top: 2rem; }

/* ============================================================
   ASSINAR: overlay de cadastro (maquete)
   ============================================================ */
.join-overlay { position: fixed; inset: 0; z-index: 120; display: none; }
.join-overlay[data-open] { display: block; }
.join-scrim { position: absolute; inset: 0; background: rgba(42,32,24,.55); opacity: 0; transition: opacity var(--dur-calm,.5s) var(--ease-soft,ease); }
.join-overlay[data-open] .join-scrim { opacity: 1; }
.join-panel {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -48%);
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--cream, #F6EFE1);
  border: 1px solid var(--line-gold, rgba(176,130,46,.42));
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--shadow-lg, 0 40px 80px -30px rgba(42,32,24,.5));
  padding: clamp(1.75rem, 4vw, 2.5rem);
  opacity: 0;
  transition: opacity var(--dur-calm,.5s) var(--ease-soft,ease), transform var(--dur-calm,.5s) var(--ease-bloom,ease);
}
.join-overlay[data-open] .join-panel { opacity: 1; transform: translate(-50%, -50%); }
.join-close { position: absolute; top: 12px; right: 12px; min-width: 44px; min-height: 44px; color: var(--ink-2, #5A4A3A); }
.join-title { font-family: var(--serif, serif); font-weight: 600; font-size: 1.6rem; color: var(--ink, #2A2018); margin: .35rem 0 0; }
.join-title #joinPlanName { color: var(--ink-gold, #B0822E); }
.join-summary { font-family: var(--sans, sans-serif); font-size: .9rem; color: var(--ink-2, rgba(42,32,24,.74)); margin: .4rem 0 0; }
.join-price { display: flex; align-items: baseline; gap: .4rem; margin: .75rem 0 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line, rgba(42,32,24,.12)); }
.join-price span:first-child { font-family: var(--serif, serif); font-weight: 600; font-size: 2rem; color: var(--ink, #2A2018); font-variant-numeric: tabular-nums; }
.join-price-cad { font-family: var(--sans, sans-serif); font-size: .82rem; color: var(--ink-2, rgba(42,32,24,.7)); }
.join-note { font-family: var(--sans, sans-serif); font-size: .78rem; line-height: 1.5; color: var(--ink-2, rgba(42,32,24,.74)); margin: .25rem 0 1.25rem; }
.join-confirm { width: 100%; }
.join-done { text-align: center; }
.join-done-emblem { display: block; width: 84px; margin: 0 auto 1rem; color: var(--wheat, #B0822E); }
.join-done-emblem svg { width: 100%; height: auto; display: block; }
.join-done-lead { font-family: var(--sans, sans-serif); font-size: .95rem; line-height: 1.6; color: var(--ink-2, rgba(42,32,24,.74)); margin: .75rem 0 1.75rem; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 920px) {
  .club-hero-inner { grid-template-columns: 1fr; }
  .club-hero-visual { order: -1; min-height: clamp(280px, 70vw, 380px); }
  .how-steps { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .how-grains { display: none; }
  .plans-grid { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
  .plan-card--featured { order: -1; }
  .perks-grid { grid-template-columns: repeat(2, 1fr); }
  .voices-grid { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
}
@media (max-width: 560px) {
  .how-steps { grid-template-columns: 1fr; }
  .perks-grid { grid-template-columns: 1fr; }
  .club-hero-cta { width: 100%; }
  .club-hero-cta .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .bt-thumb, .plan-card, .faq-ico::before, .faq-ico::after { transition: none; }
}