/* BBH Sans Bartle - font-face (use arquivos em assets/fonts/) */
@font-face {
  font-family: "BBH Sans Bartle";
  src: local("BBH Sans Bartle Regular"), local("BBHSansBartle-Regular"),
       url("fonts/BBHSansBartle-Regular.woff2") format("woff2"),
       url("fonts/BBHSansBartle-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "BBH Sans Bartle";
  src: local("BBH Sans Bartle Bold"), local("BBHSansBartle-Bold"),
       url("fonts/BBHSansBartle-Bold.woff2") format("woff2"),
       url("fonts/BBHSansBartle-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root { 
  --purple: #FFFFFF; /* acento agora em branco */
  --green: #10B981;  /* secundária */
  --text: #F3F4F6;   /* texto claro */
  --bg: #FFFFFF;     /* branco */
  --bg-alt: #F9FAFB; /* cinza claro */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: "BBH Sans Bartle", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial; color: var(--text); background:
  radial-gradient(1200px 800px at 20% 0%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 60%),
  linear-gradient(135deg, #1f2329 0%, #191c21 50%, #15181c 100%);
}
/* Headings: aplicar Archivo Black */
h1, h2, h3,
.headline,
.section h2,
.card h3,
.form-title,
.cta h2,
.about-copy h2 {
  font-family: "Archivo Black", "BBH Sans Bartle", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight: 400;
}
a { color: var(--purple); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 24px; }
.container.narrow { max-width: 700px; }
.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }
.grid { display: grid; gap: 24px; }
.grid.three { grid-template-columns: repeat(3, 1fr); }

.site-header { position: sticky; top: 0; background: rgba(27,31,36,0.8); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid #2b2f36; z-index: 50; padding: 4px 0; }
.site-header .container { padding: 8px 24px; }
.logo { font-weight: 700; color: var(--purple); display: flex; align-items: center; }
.logo img { display: block; width: 160px; height: 56px; object-fit: contain; }
.mini-nav a { margin-left: 16px; color: #D1D5DB; }
.menu-toggle { display: none; }
.btn { display: inline-block; padding: 12px 18px; border-radius: 8px; font-weight: 600; }
.btn-outline { border: 2px solid var(--purple); color: var(--purple); }
.btn-primary { background: var(--purple); color: #111827; border: none; }
.btn-primary:hover { filter: brightness(0.95); }

.hero { padding: 56px 0; background: transparent; }
.hero-grid { grid-template-columns: 1fr; grid-template-areas: "headline" "visual" "copy"; }
.headline { font-size: 34px; line-height: 1.1; margin: 0 0 12px; text-align: center; grid-area: headline; }
.sub { font-size: 20px; color: #D1D5DB; margin: 0 0 16px; }
.desc { font-size: 16px; color: #E5E7EB; margin: 0 0 24px; }
.badge { margin-top: 12px; color: #9CA3AF; }
.ab-switch { margin-top: 6px; font-size: 14px; color: #9CA3AF; }

.lead-form { position: relative; z-index: 0; background: #fff; color: #1F2937; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; box-shadow: 0 16px 36px rgba(255,255,255,0.14), 0 8px 22px rgba(0,0,0,0.20); }
.lead-form::before { content: ""; position: absolute; inset: -26px; border-radius: 18px; background: radial-gradient(600px 300px at 20% 0%, rgba(255,255,255,0.14), rgba(255,255,255,0)); filter: blur(6px); z-index: -1; }
.form-header { margin-bottom: 12px; }
.form-title { margin: 0; font-size: 18px; font-weight: 700; color: #111827; }
.form-subtitle { margin: 4px 0 0; font-size: 14px; color: #6B7280; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.lead-form label span { display: block; font-size: 12px; color: #6B7280; margin-bottom: 6px; }
.lead-form input { width: 100%; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; }
.lead-form input:focus { outline: none; border-color: #d1d5db; box-shadow: 0 0 0 2px rgba(0,0,0,0.06); }
.microcopy { font-size: 13px; color: #6B7280; margin-top: 8px; }
.alert { padding: 10px 12px; border-radius: 8px; margin: 10px 0; font-size: 14px; }
.alert-error { background: #FEF2F2; color: #B91C1C; border: 1px solid #FCA5A5; }

.ebook-mock { display: grid; grid-template-columns: 16px 1fr; gap: 0; align-items: stretch; }
.ebook-mock .spine { background: #1F2937; border-radius: 8px 0 0 8px; }
.ebook-mock .cover { background: radial-gradient(circle at 20% 20%, #ffffff, #f3f4f6 60%); border-radius: 0 12px 12px 0; padding: 24px; color: #111827; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 10px 30px rgba(255,255,255,0.35); }
.ebook-mock .title { font-weight: 700; font-size: 28px; line-height: 1.1; }
.ebook-mock .tag { background: rgba(255,255,255,0.2); padding: 8px 12px; border-radius: 8px; font-weight: 600; align-self: start; }

.section { padding: 32px 0; color: #E5E7EB; }
.section.alt { background: transparent; }
.section h2 { font-size: 28px; margin-bottom: 20px; }
.section#para-quem h2, #para-quem.section h2, #para-quem h2 { font-size: 24px; margin-bottom: 16px; }
.section, .hero, .thanks, .site-footer { text-align: left; }
.section.light { background: #ffffff; color: #111827; }
.section.light .checklist li::before { background: rgba(17,24,39,0.6); box-shadow: 0 0 0 1px rgba(17,24,39,0.2); }
.section.light .cards { font-size: 15px; }
.features { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Container genérico de cards responsivos */
.cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.card { background: #12161b; border: 1px solid #2b2f36; border-radius: 12px; padding: 18px; box-shadow: 0 4px 12px rgba(0,0,0,0.18); color: #E5E7EB; }
.card { text-align: left; }
.section.light .card { background: #ffffff; color: #111827; border: 1px solid #e5e7eb; box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.section.light .card p { color: #374151; }
.section.light .card .icon { background: rgba(17,24,39,0.06); border: 1px solid #e5e7eb; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.section.light .card .icon i { color: #111827; }
.card { transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.28); border-color: rgba(255,255,255,0.18); }
.card h3 { line-height: 1.2; }
.card .meta { font-size: 12px; color: #9CA3AF; }
.card .actions { margin-top: 10px; }
.card .actions .btn { width: 100%; text-align: center; }
.card .icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,0.08); border: 1px solid #2b2f36; box-shadow: 0 4px 10px rgba(0,0,0,0.25); }
.card .icon i { font-size: 22px; color: #93c5fd; }
.card .icon + h3 { margin-top: 10px; }
.card h3 { margin: 8px 0; font-size: 18px; text-align: left; }
.card p { color: #D1D5DB; }

/* (removido) Regras específicas de DxTech e .brand-logo não são mais necessárias */

.checklist { list-style: none; padding: 0; margin: 0 0 12px; }
.checklist li { margin: 8px 0; position: relative; padding-left: 18px; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.6); box-shadow: 0 0 0 1px rgba(255,255,255,0.2); }
.antipersona { font-size: 14px; color: #fbbf24; background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.35); padding: 12px; border-radius: 8px; }

/* Removido: estilos da seção CTA final */

.site-footer { border-top: 1px solid #2b2f36; padding: 20px 0; background: transparent; color: #E5E7EB; }
.site-footer .foot-links a { margin-left: 12px; color: #9CA3AF; }

.thanks { padding: 56px 0; }
.thanks h1 { margin-top: 0; }
.thanks .muted { color: #6B7280; font-size: 14px; }
.thanks .back { margin-top: 16px; }
/* Mensagem de destaque na página de obrigado */
.thanks .lead { color: #E5E7EB; font-size: 16px; margin: 6px 0 10px; }
/* Banner visual em formato paisagem na página de obrigado */
.thanks-hero {
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9; /* formato paisagem */
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  border: 1px solid #2b2f36;
  box-shadow: 0 18px 40px rgba(255,255,255,0.14), 0 8px 26px rgba(0,0,0,0.35);
  margin: 0 auto 24px;
}

/* Mermaid container: responsivo e com rolagem horizontal se necessário */
.mermaid { display: block; max-width: 100%; overflow-x: auto; }
.section.light .mermaid svg { width: 100%; height: auto; max-width: 100%; }

/* Mapa do método como imagem estática */
.method-map {
  display: block;
  width: 100%;
  height: auto;
  max-width: 560px; /* reduzido para deixar a imagem menor */
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid #2b2f36;
  box-shadow: 0 18px 40px rgba(255,255,255,0.14), 0 8px 26px rgba(0,0,0,0.35);
}

@media (max-width: 900px) {
  .thanks-hero { width: 92%; }
}

/* Seção promocional (card branco com botão largo) */
.promo { padding: 24px 0 56px; }
.promo-card {
  background: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  padding: 24px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.promo-logo { width: 84px; height: 84px; border-radius: 16px; display: block; margin: 0 auto 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.26); }
.promo-title { font-size: 24px; margin: 8px 0 10px; }
.promo-desc { color: #374151; font-size: 16px; }
.promo-meta { color: #6B7280; font-size: 14px; margin: 8px 0 16px; }
.promo-cta { display: block; width: 100%; text-align: center; padding: 14px 18px; border: 1px solid #d1d5db !important; color: #111827 !important; background: #ffffff; border-radius: 12px; }
.promo-cta:hover { filter: brightness(0.98); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .features, .grid.three, .form-row { grid-template-columns: 1fr; }
  /* Header: melhor enquadramento do menu em mobile */
  .site-header .container { flex-wrap: wrap; gap: 12px; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 12px; border: 1px solid #2b2f36; border-radius: 8px; color: #E5E7EB; background: rgba(27,31,36,0.6); font-size: 20px; }
  .menu-toggle[aria-expanded="true"] { background: rgba(255,255,255,0.12); }
  .menu-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .mini-nav { display: none; width: 100%; }
  .mini-nav.open { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mini-nav a { margin-left: 0; display: block; text-align: center; padding: 10px 12px; border-radius: 8px; }
  .mini-nav .btn { grid-column: 1 / -1; justify-self: stretch; }
}

@media (max-width: 560px) {
  .mini-nav.open { grid-template-columns: 1fr; }
}

/* Gamified form */
.gamified .progress { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.gamified .progress-bar { height: 12px; background: #2b2f36; border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); }
.gamified .progress-fill { display: block; height: 100%; background: linear-gradient(90deg, #93c5fd, #bfdbfe); border-radius: 999px; transition: width 250ms ease; }
.gamified .progress-label { font-size: 12px; color: #6B7280; justify-self: end; }
.gamified .progress-steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gamified .progress-steps .dot { width: 10px; height: 10px; border-radius: 50%; background: #9CA3AF; opacity: 0.6; justify-self: center; }
.gamified .progress-steps .dot.active { background: #FFFFFF; opacity: 1; box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }

.gamified .step { display: grid; gap: 10px; }
.gamified .step[hidden] { display: none !important; }
.gamified .step-actions { display: flex; gap: 12px; justify-content: space-between; }
.lead-form .btn-primary { border: 1px solid #d1d5db; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.gamified .step-next[disabled] { opacity: 0.6; cursor: not-allowed; }
.gamified .choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 6px 0 10px; }
.gamified .choices .question { margin: 0 0 8px; font-weight: 600; font-size: 14px; color: #374151; grid-column: 1 / -1; }
.gamified .choice { position: relative; display: block; padding: 10px 36px 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #374151; font-size: 14px; line-height: 1.25; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.gamified .choice input { position: absolute; opacity: 0; pointer-events: none; }
.gamified .choice:hover { border-color: #d1d5db; background: #fafafa; }
.gamified .choice:has(input:checked) { border-color: #FFFFFF; background: #F3F4F6; box-shadow: 0 0 0 2px rgba(255,255,255,0.12) inset; }
.gamified .choice:has(input:checked)::after { content: "✓"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #FFFFFF; text-shadow: 0 0 2px rgba(0,0,0,0.4); font-weight: 700; }

@media (max-width: 700px) {
  .gamified .choices { grid-template-columns: 1fr; }
}

/* Stepper aprimorado: linha de conexão e estados */
.gamified .progress-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: center; margin-top: 6px; position: relative; }
.gamified .progress-steps::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: linear-gradient(to right, #e5e7eb, #d1d5db); transform: translateY(-50%); z-index: 0; }
.gamified .progress-steps .dot { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid #e5e7eb; display: grid; place-items: center; color: #6b7280; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.08); position: relative; z-index: 1; transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease; cursor: pointer; }
.gamified .progress-steps .dot span { font-size: 12px; line-height: 1; }
.gamified .progress-steps .dot.active { border-color: #3b82f6; color: #1f2937; transform: scale(1.08); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
.gamified .progress-steps .dot.completed { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.gamified .progress-steps .dot.completed span { display: none; }
.gamified .progress-steps .dot.completed::after { content: "✓"; font-weight: 700; }

/* Botão Voltar (outline) */
.gamified .step-prev { background: #fff; color: #374151; border: 1px solid #d1d5db; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.gamified .step-prev[disabled] { opacity: 0.5; cursor: not-allowed; }
.hero-visual video { display: block; border-radius: 16px; background: #0f1318; box-shadow: 0 18px 40px rgba(255,255,255,0.14), 0 8px 26px rgba(0,0,0,0.35); aspect-ratio: 16 / 9; width: 92%; max-width: 900px; margin: 0 auto; object-fit: cover; }
/* alinhar o bloco visual no grid do hero */
.hero-headline { grid-area: headline; text-align: center; }
.hero-headline .intro-desc { color: #E5E7EB; font-size: 16px; margin: 6px auto 14px; max-width: 900px; }
.hero-headline .sub { color: #E5E7EB; font-size: 16px; margin: 8px auto 12px; max-width: 900px; text-align: center; }
.hero-visual { align-self: center; grid-area: visual; }
.hero-copy { grid-area: copy; }
/* Centralizar parágrafos do hero */
.hero-copy .sub,
.hero-copy .desc {
  text-align: left;
}
/* Sobre Mim */
.about-grid {
  align-items: center;
  gap: 24px;
  grid-template-columns: 1fr; /* empilha imagem acima do texto em desktop e mobile */
}
.about-copy { text-align: left; }

.about-photo {
  width: 100%;
  max-width: 820px; /* destaque visual, mesma largura do vídeo */
  aspect-ratio: 16 / 9; /* formato paisagem */
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0.02) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid #2b2f36;
  box-shadow: 0 22px 46px rgba(0,0,0,0.45), 0 8px 26px rgba(255,255,255,0.14) inset;
  justify-self: center; /* centraliza em desktop */
  margin: 0 auto; /* centraliza pelo container */
}

/* Garantir consistência do tamanho da imagem da seção Sobre */
.about-photo img {
  display: block;
  width: 100%; /* respeita o max-width do container (820px) */
  height: auto;
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.about-copy p { margin-bottom: 12px; }
.about-copy h2 { font-size: 24px; }
.about-copy p { font-size: 15px; }
.about-copy .checklist { margin-top: 6px; }
/* Centralização da checklist */
.checklist { text-align: center; }
.checklist li { padding-left: 0; }
.checklist li::before { display: none; }

/* Para Quem: mini cards com ícones e ênfase no alerta */
#para-quem .checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; text-align: left; margin-bottom: 16px; }
#para-quem .checklist li { background: rgba(255,255,255,0.06); border: 1px solid #2b2f36; border-radius: 10px; padding: 12px; display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; }
.section.light #para-quem .checklist li { background: #fff; border-color: #e5e7eb; }
#para-quem .bullet-icon { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #93c5fd; background: rgba(147,197,253,0.18); display: grid; place-items: center; }
#para-quem .bullet-icon::after { content: "✓"; font-size: 12px; font-weight: 700; color: #93c5fd; }
#para-quem .antipersona { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.5); color: #fbbf24; padding: 14px; border-radius: 10px; text-align: left; }
#para-quem .antipersona .anti-title { font-weight: 700; color: #f59e0b; margin-bottom: 6px; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { max-width: 100%; }
  .about-copy h2 { font-size: 22px; }
  .about-copy p { font-size: 14px; }
}