/* ==========================================================================
   /dlg · Camada visual da identidade Doctor Led Growth
   (referencia: doctorledgrowth.epuredigital.com.br): preto profundo, dourado
   champanhe como cor de acao e destaque, serifa elegante nos titulos, corpo Inter,
   cards de vidro escuro com borda dourada fina. So sobrescreve tokens e detalhes;
   layout, componentes e comportamento continuam em _shared/5g.css.
   Carregar DEPOIS de 5g.css e qf-5g.css.
   ========================================================================== */
:root {
  --ink: #050505;
  --ink-2: #0D0C0A;
  --ink-rgb: 5, 5, 5;
  --graphite: #2A2824;
  --gray: #A39C90;                       /* 7.2:1 sobre #050505 */
  --off: #F5F1E8;                        /* branco quente */
  --accent: #C9A24A;                     /* dourado champanhe */
  --accent-hover: #E0B95A;
  --accent-rgb: 201, 162, 74;
  --accent-soft: rgba(201, 162, 74, .14);
  --on-accent: #0A0903;                  /* texto sobre o dourado: 8.5:1 */
  --support: var(--accent);
  --support-strong: #8F6F1F;
  --line: rgba(201, 162, 74, .22);
  --line-strong: rgba(201, 162, 74, .45);
  --line-light: rgba(5, 5, 5, .1);
  --light-bg: #0D0C0A;
  --font-display: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
}

/* ---------- tipografia: serifa elegante, pesos 500 a 600, kickers com tracking ---------- */
h1, h2 { font-weight: 600; letter-spacing: -.005em; font-variation-settings: normal; }
h3, h4 { font-weight: 600; letter-spacing: 0; font-variation-settings: normal; }
.hero h1 { font-size: clamp(2.8rem, 1.6rem + 5vw, 5.6rem); line-height: 1; max-width: 13ch; }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--accent); }
.section-head h2, .split h2, .form-copy h2 { font-size: clamp(2.2rem, 1.35rem + 2.9vw, 3.6rem); line-height: 1.06; }
.cta-band h2 { font-size: clamp(2.1rem, 1.3rem + 2.7vw, 3.3rem); color: var(--accent); }
.card h3, .step h3, .event h3 { font-size: 1.5rem; }
.person h3 { font-size: 1.9rem; }
.seg-card .lab h3 { font-size: 1.8rem; }
.faq summary { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
.pull { font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2rem); font-weight: 500; }
.price { font-weight: 600; }
.stat b { font-weight: 600; }
.qf-q { font-size: 1.65rem; }
.wa-dialog h3 { font-size: 1.7rem; }
.hero-fig .cap b { font-size: 1.7rem; }
.kicker, .hero-eyebrow, .card .eyebrow, .person .role, .price-card .eyebrow, .level .lv-kick, .footer h4, .qf-top, .field label { letter-spacing: .24em; }

/* ---------- marca: logo 5G pequeno, "uma imersao da 5G Company" ---------- */
.brand img { width: 32px; height: 32px; border-radius: 9px; opacity: .9; }
.brand span { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: .04em; }
.brand small { font-family: var(--font-body); letter-spacing: .16em; font-size: .66rem; color: var(--gray); }
.header { background: rgba(5, 5, 5, .7); }
.header.is-scrolled { background: rgba(5, 5, 5, .92); border-bottom-color: var(--line); }

/* ---------- superficies: vidro escuro com borda dourada fina ---------- */
.card, .step, .icon-list li, .person, .event, .price-card:not(.price-card--main), .stat, .qf-card, .wa-dialog, .chip, .tags li {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(201, 162, 74, .28);
}
.card:hover { border-color: var(--accent); box-shadow: 0 24px 50px -30px rgba(201, 162, 74, .35); }
.card .ic, .icon-list .ic { background: rgba(201, 162, 74, .1); border: 1px solid rgba(201, 162, 74, .3); }
.card--accent { border-color: rgba(201, 162, 74, .6); }
.seg-card .ic { border-color: rgba(201, 162, 74, .55); background: rgba(5, 5, 5, .35); }
.seg-card { box-shadow: 0 20px 46px -28px rgba(0, 0, 0, .9), 0 0 0 1px rgba(201, 162, 74, .18); }
.cta-band { border-color: rgba(201, 162, 74, .5); background: linear-gradient(135deg, rgba(201, 162, 74, .14), rgba(255, 255, 255, .02) 65%); }
.hero::before {
  background:
    radial-gradient(60% 55% at 85% 15%, rgba(201, 162, 74, .16), transparent 65%),
    radial-gradient(40% 40% at 10% 90%, rgba(201, 162, 74, .07), transparent 70%);
}
.hero-fig, .split-fig { box-shadow: 0 0 0 1px rgba(201, 162, 74, .25); }
.gallery figure { box-shadow: 0 0 0 1px rgba(201, 162, 74, .18); }
.mentor img { border: 1px solid rgba(201, 162, 74, .25); }
.faq details { border-color: rgba(201, 162, 74, .22); }
.byline, .footer, .footer-bottom { border-color: rgba(201, 162, 74, .2); }
.footer { background: #080807; }
.section--alt { background: #0A0908; }

/* ---------- formulario e modal no mesmo vidro escuro ---------- */
.qf-card { box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .95), 0 0 60px -30px rgba(201, 162, 74, .25); }
.qf-opt { border-color: rgba(201, 162, 74, .3); }
.qf-opt:hover, .qf-opt:focus-visible, .qf-opt.is-selected { border-color: var(--accent); background: rgba(201, 162, 74, .12); }
.qf-prog span { background: rgba(201, 162, 74, .16); }
.input { border-color: rgba(201, 162, 74, .35); }
.input:focus { box-shadow: 0 0 0 3px rgba(201, 162, 74, .18); }
.qf-cal-off { border-color: rgba(201, 162, 74, .4); }
.wa-dialog .close { border-color: rgba(201, 162, 74, .35); }

/* ---------- botoes ---------- */
.btn-primary { box-shadow: 0 10px 30px -14px rgba(201, 162, 74, .75); }
.btn-ghost { border-color: rgba(201, 162, 74, .45); }
.btn-ghost:hover { border-color: var(--accent-hover); color: var(--accent-hover); }
.wa-float { box-shadow: 0 14px 34px -12px rgba(201, 162, 74, .7); }
.confirm { color: var(--accent-hover); border-color: var(--accent-hover); }