/* ==========================================================================
   Curso Presencial · Investimentos Financeiros — 15/08/2026
   Folha de estilo da landing page. Extraída do <style> embutido no HTML.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------ */
:root {
  --gold: #d4af37;
  --gold2: #f4d76d;
  --dark: #060606;
  --panel: #111;
  --panel2: #171717;
  --text: #f7f7f7;
  --muted: #c1c1c1;
  --green: #32d27d;
  --line: rgba(212,175,55,.3);

  /* Texto secundário em dois passos, para haver hierarquia dentro do corpo. */
  --dim: #9a9a9a;
  /* Filete neutro: separa sem desenhar caixa. */
  --rule: rgba(255,255,255,.09);

  /* Escala tipográfica, razão 1.33. Todo tamanho da página sai daqui. */
  /* Com a quebra em três linhas, a linha mais longa passa a ser
     "sobre Investimentos" (19 caracteres) em vez de "Investimentos
     Financeiros" (25). Isso libera espaço para um display maior. */
  --t-display: clamp(2.1rem, 4.6vw, 3.7rem);
  --t-h2:      clamp(1.75rem, 3vw, 2.35rem);
  --t-lead:    1.125rem;
  --t-body:    1rem;
  --t-meta:    .8125rem;
  --t-micro:   .6875rem;

  /* Escala de espaçamento. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;

  /* Raios: só dois. A página tinha oito valores diferentes (13, 14, 16, 18,
     19, 20, 26 e 8px), o que fazia cada seção parecer de um site distinto. */
  --r: 14px;
  --r-sm: 8px;
}

/* --- Base -------------------------------------------------------------- */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--dark);
  color: var(--text);
  font-family: Arial,Helvetica,sans-serif;
  line-height: 1.6;
}
.wrap {
  overflow: hidden;
}
.container {
  width: min(1180px,calc(100% - 34px));
  margin: auto;
}

/* --- Cabeçalho fixo ---------------------------------------------------- */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(3,3,3,.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.top-in {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
}
.brand img {
  width: 47px;
  height: 47px;
  object-fit: contain;
}
.brand small {
  display: block;
  color: var(--gold);
  font-size: .72rem;
  letter-spacing: .09em;
}

/* --- Botões ------------------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 26px;
  border-radius: var(--r-sm);
  background: var(--gold);
  color: #15100a;
  text-decoration: none;
  font-size: var(--t-meta);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .18s;
}
/* O anel que pulsa é um pseudo-elemento próprio: animar box-shadow no
   próprio botão forçaria repaint a cada quadro. */
.btn:after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.btn:hover {
  background: var(--gold2);
  border-color: var(--gold2);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -10px rgba(212,175,55,.55);
}
.btn:hover:after {
  opacity: 1;
  animation: btn-pulse 1.9s ease-out infinite;
}
@keyframes btn-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,.45); }
  70%  { box-shadow: 0 0 0 13px rgba(212,175,55,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}
.btn.outline {
  background: transparent;
  color: var(--text);
  border-color: rgba(255,255,255,.22);
}
/* O secundário não pulsa: dois botões pulsando lado a lado anulam a
   hierarquia entre "inscrever" e "ver conteúdo". */
.btn.outline:hover {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold2);
  box-shadow: none;
}
.btn.outline:hover:after {
  animation: none;
  opacity: 0;
}

/* --- Hero -------------------------------------------------------------- */
.hero {
  padding: var(--s-8) 0;
  background:
    radial-gradient(circle at 82% 14%, rgba(212,175,55,.15), rgba(212,175,55,0) 34%),
    linear-gradient(180deg, #0b0b0b, #050505);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr);
  gap: var(--s-7);
  align-items: start;
}

/* Sobrancelha: filete + caixa alta destacada. Mesmo padrão da ficha. */
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-5);
  color: var(--gold);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-eyebrow:before {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--gold);
  flex: 0 0 auto;
}
/* As quebras são explícitas no HTML para controlar o desenho das três linhas.
   Abaixo de 880px elas somem e o texto volta a quebrar naturalmente. */
.hero h1 {
  margin: 0 0 var(--s-5);
  font-size: var(--t-display);
  line-height: 1.04;
  letter-spacing: -.028em;
}
.hero h1 span {
  color: var(--gold2);
}
.lead {
  margin: 0;
  max-width: 46ch;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--muted);
}
.hero-actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin: var(--s-6) 0 var(--s-5);
}

/* Especificações em linha única, separadas por ponto médio. */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
  font-size: var(--t-meta);
  color: var(--muted);
}
.facts li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.facts li + li:before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .55;
}

/* --- O que você leva ---------------------------------------------------- */
/* Dois tons de propósito: a primeira metade repete o parágrafo de abertura,
   então recua; a segunda é a única informação nova e recebe o destaque. */
.takeaway {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.takeaway h2 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
  color: var(--gold);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.takeaway h2:before {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--gold);
  flex: 0 0 auto;
}
.takeaway p {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.6;
  text-wrap: pretty;
}
.takeaway-setup {
  color: var(--dim);
}
.takeaway-key {
  color: var(--gold2);
  font-weight: 700;
}

/* Revelação palavra a palavra. Os <span> são criados por evento.js — sem JS,
   o texto aparece normalmente porque .word nunca chega a existir. */
.takeaway-key .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.38em);
  animation: word-up .52s cubic-bezier(.22,.8,.3,1) forwards;
}
@keyframes word-up {
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Ficha do evento ---------------------------------------------------- */
/* Uma única hierarquia: a data ancora, o resto é dado em filetes. */
.ficha {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--s-6);
}
.ficha-day {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--gold);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ficha-date strong {
  display: block;
  font-size: 2.35rem;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.ficha-date em {
  font-style: normal;
  color: var(--dim);
}
.ficha-rows {
  margin: var(--s-5) 0 0;
  border-top: 1px solid var(--rule);
}
.ficha-rows > div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0,1fr);
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
.ficha-rows dt {
  color: var(--dim);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-top: 2px;
}
.ficha-rows dd {
  margin: 0;
  font-size: var(--t-meta);
  line-height: 1.5;
}

/* Contagem regressiva sem caixas: números separados por filete vertical. */
.ficha-count {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  margin-top: var(--s-5);
}
.ficha-count div {
  text-align: center;
  padding: 0 var(--s-2);
}
.ficha-count div + div {
  border-left: 1px solid var(--rule);
}
.ficha-count strong {
  display: block;
  color: var(--gold2);
  font-size: 1.5rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.ficha-count small {
  display: block;
  margin-top: var(--s-1);
  color: var(--dim);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ficha-qr {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
/* 238px: tamanho que faz a base da ficha alinhar com o fim do texto
   "O que você leva" na coluna da esquerda, em 1440px. */
.ficha-qr img {
  width: 238px;
  height: 238px;
  flex: 0 0 auto;
  background: #fff;
  padding: 7px;
  border-radius: 8px;
}
.ficha-qr p {
  margin: 0;
  font-size: var(--t-meta);
  line-height: 1.45;
  color: var(--dim);
}

/* --- Seções — estrutura comum ------------------------------------------ */
.section {
  padding: var(--s-8) 0;
}
/* As faixas de tom alternado terminavam num corte seco. Cada borda agora
   dissolve no tom vizinho e recebe um filete que some nas pontas, de modo
   que a mudança de fundo pareça uma emenda e não um recorte. */
.section.alt {
  position: relative;
  isolation: isolate;
  background: #0c0c0c;
}
.section.alt:before,
.section.alt:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 96px;
  z-index: -1;
  pointer-events: none;
}
.section.alt:before {
  top: 0;
  background:
    linear-gradient(90deg, rgba(212,175,55,0), rgba(212,175,55,.3), rgba(212,175,55,0)) top/100% 1px no-repeat,
    linear-gradient(#060606, rgba(6,6,6,0));
}
.section.alt:after {
  bottom: 0;
  background:
    linear-gradient(90deg, rgba(212,175,55,0), rgba(212,175,55,.3), rgba(212,175,55,0)) bottom/100% 1px no-repeat,
    linear-gradient(rgba(6,6,6,0), #060606);
}

/* Sobrancelha de seção: mesmo desenho da do hero e da ficha, para o olho
   reconhecer o mesmo nível hierárquico em toda a página. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--gold);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow:before {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--gold);
  flex: 0 0 auto;
}
.section h2 {
  font-size: var(--t-h2);
  line-height: 1.12;
  letter-spacing: -.018em;
  margin: var(--s-4) 0 0;
  max-width: 24ch;
}
.intro {
  margin: var(--s-4) 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: var(--t-lead);
  line-height: 1.6;
}

/* Superfície única para tudo que é "cartão" na página. */
.card,
.material,
.bonus {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: var(--s-6);
}
.card h3,
.material h3,
.bonus h3 {
  margin: 0 0 var(--s-2);
  color: var(--gold2);
  font-size: var(--t-lead);
  line-height: 1.3;
  letter-spacing: -.01em;
}
.card p,
.material p,
.bonus p {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-meta);
  line-height: 1.6;
}
/* Declaração de resultado. Faixa própria entre o hero e "Para quem é" —
   fora do hero, onde competia com o parágrafo de abertura. */
.statement {
  padding: var(--s-8) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: #0a0a0a;
}
.statement .container {
  display: grid;
  grid-template-columns: 9rem minmax(0,1fr);
  gap: var(--s-7);
  align-items: start;
}
.statement h2 {
  margin: 0;
  padding-top: .35em;
  color: var(--gold);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.statement p {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -.005em;
  color: var(--text);
  text-wrap: pretty;
}
.statement strong {
  color: var(--gold2);
  font-weight: 400;
}

/* --- Para quem é ------------------------------------------------------- */
.grid3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
}

/* --- Conteúdo programático --------------------------------------------- */
/* Eram 15 cartões numa grade — uma parede de caixas. Viram uma lista de
   programa: filete entre módulos, sem moldura, tópicos em corpo menor. */
.modules {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  column-gap: var(--s-7);
  margin-top: var(--s-6);
  border-top: 1px solid var(--rule);
}
/* O número é informação real — a ordem da jornada — então ele ancora a linha
   em vez de ficar diluído dentro do título. */
.module {
  position: relative;
  padding: var(--s-5) var(--s-3) var(--s-5) 3.6rem;
  margin: 0 calc(var(--s-3) * -1);
  border-bottom: 1px solid var(--rule);
  border-radius: var(--r-sm);
  transition: background .2s;
}
.module:hover {
  background: rgba(212,175,55,.05);
}
.module-num {
  position: absolute;
  left: var(--s-3);
  top: calc(var(--s-5) - 2px);
  font-size: 1.7rem;
  line-height: 1;
  font-weight: 900;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  opacity: .5;
  transition: opacity .2s;
}
.module:hover .module-num {
  opacity: 1;
}
.module h3 {
  margin: 0 0 var(--s-3);
  color: var(--text);
  font-size: var(--t-lead);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.012em;
}
.module ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--t-meta);
  line-height: 1.6;
}
.module li {
  position: relative;
  padding-left: var(--s-4);
}
.module li:before {
  content: '';
  position: absolute;
  left: 0;
  top: .72em;
  width: 5px;
  height: 1px;
  background: var(--gold);
  opacity: .6;
}

/* --- Material exclusivo ------------------------------------------------ */
.materials {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
}
/* Ícones desenhados no lugar dos emojis: mesmo traço, mesma cor do sistema. */
.material .icon {
  margin-bottom: var(--s-5);
  color: var(--gold);
}
.material .icon svg {
  display: block;
  width: 26px;
  height: 26px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Bônus ------------------------------------------------------------- */
.bonus-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
}
/* A pílula dourada sólida competia com os botões de ação. Vira rótulo. */
.bonus .tag {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  color: var(--gold);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .16em;
}
.bonus .tag:before {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--gold);
  flex: 0 0 auto;
}
.bonus p strong {
  color: var(--text);
}

/* --- Professor --------------------------------------------------------- */
.teacher {
  display: grid;
  grid-template-columns: 300px minmax(0,1fr);
  gap: var(--s-7);
  align-items: center;
}
.teacher img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--r);
  border: 1px solid var(--line);
}
.teacher p {
  color: var(--muted);
  line-height: 1.65;
}

/* --- Oferta ------------------------------------------------------------ */
/* O botão flutuava centralizado numa segunda coluna, sem relação com a lista.
   Agora a oferta lê de cima para baixo: preço, o que inclui, ação. */
/* Cartão de preço: estreito, centralizado, com o valor no topo da hierarquia.
   Num bloco de compra o preço é o que decide — o título só contextualiza. */
.offer {
  position: relative;
  isolation: isolate;
  max-width: 34rem;
  margin: var(--s-7) auto 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-7);
  text-align: center;
  box-shadow: 0 26px 70px -30px rgba(0,0,0,.9);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.offer:hover {
  border-color: rgba(212,175,55,.6);
  box-shadow: 0 34px 90px -30px rgba(212,175,55,.28);
  transform: translateY(-3px);
}

/* Facho que segue o cursor. As coordenadas chegam de evento.js como
   --mx/--my; sem JS o gradiente fica parado no topo, sem prejuízo. */
.offer:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    circle 320px at var(--mx,50%) var(--my,0%),
    rgba(212,175,55,.16),
    rgba(212,175,55,0) 68%
  );
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.offer:hover:before {
  opacity: 1;
}
.offer-mark {
  width: 76px;
  height: 76px;
  object-fit: contain;
  margin-bottom: var(--s-5);
}
/* Centralizada, a sobrancelha ganha filete dos dois lados — com um só ela
   fica torta em relação ao eixo do cartão. */
.offer .eyebrow,
.final .eyebrow {
  justify-content: center;
}
.offer .eyebrow:after,
.final .eyebrow:after {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--gold);
  flex: 0 0 auto;
}
.offer h2 {
  margin: var(--s-4) auto 0;
  max-width: 18ch;
  font-size: 1.95rem;
  line-height: 1.18;
  letter-spacing: -.022em;
}
.price {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule);
  font-size: clamp(2.9rem, 7vw, 3.6rem);
  line-height: 1;
  color: var(--gold2);
  font-weight: 900;
  letter-spacing: -.035em;
}
/* Checklist do que está incluído. O verde já existia na paleta da página
   (--green, usado nos checks originais) e marca "incluído" sem competir
   com o dourado, que fica reservado ao preço e à ação. */
.offer ul {
  display: inline-grid;
  gap: var(--s-3);
  margin: var(--s-6) 0 0;
  padding: var(--s-6) 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
  text-align: left;
}
.offer li {
  display: grid;
  grid-template-columns: 1.35rem minmax(0,1fr);
  gap: var(--s-3);
  color: var(--text);
  font-size: var(--t-body);
  line-height: 1.5;
}
.offer li:before {
  content: '✓';
  color: var(--green);
  font-weight: 900;
  line-height: inherit;
}
.offer .btn {
  display: flex;
  width: 100%;
  margin-top: var(--s-6);
  padding: 19px 26px;
}
.legal {
  margin: var(--s-5) 0 0;
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--dim);
  text-align: left;
}

/* --- FAQ --------------------------------------------------------------- */
/* Sete cartões arredondados viravam sete pílulas idênticas. Agora é uma
   lista com filetes e um sinal +/− que gira ao abrir. */
.faq .container > details:first-of-type {
  border-top: 1px solid var(--rule);
  margin-top: var(--s-6);
}
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  cursor: pointer;
  font-size: var(--t-body);
  font-weight: 700;
  list-style: none;
  transition: color .18s;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  color: var(--gold2);
}
.faq summary:after {
  content: '';
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  background:
    linear-gradient(var(--gold),var(--gold)) center/100% 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) center/1px 100% no-repeat;
  transition: transform .22s ease;
}
.faq details[open] summary:after {
  transform: rotate(135deg);
}
.faq p {
  margin: 0 0 var(--s-5);
  max-width: 68ch;
  color: var(--muted);
  font-size: var(--t-meta);
  line-height: 1.65;
}

/* --- Chamada final ----------------------------------------------------- */
/* Sem brilho de fundo. Num container largo ele virava faixa retangular, e
   puxá-lo para cima invadia o FAQ. O filete no topo já marca a seção. */
.final {
  position: relative;
  padding: var(--s-8) 0;
  text-align: center;
}
.final:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(212,175,55,0), rgba(212,175,55,.3), rgba(212,175,55,0));
}
.final .eyebrow {
  justify-content: center;
}
.final h2 {
  max-width: 20ch;
  margin: var(--s-4) auto 0;
  font-size: var(--t-h2);
  line-height: 1.12;
  letter-spacing: -.018em;
}
.final p {
  color: var(--muted);
  font-size: var(--t-meta);
}
.final .btn {
  margin-top: var(--s-5);
}
/* Precisa de .final na frente: .final p tem especificidade maior que .scarcity
   sozinha e estava rebaixando a escassez para tamanho de legenda. */
.final .scarcity {
  margin-top: var(--s-5);
  font-weight: 700;
  color: var(--gold2);
  font-size: var(--t-lead);
}

/* --- Rodapé e barra fixa mobile ---------------------------------------- */
.footer {
  text-align: center;
  padding: 30px 0;
  border-top: 1px solid #222;
  color: #8d8d8d;
}
.mobile {
  display: none;
}

/* --- Responsivo -------------------------------------------------------- */
@media (max-width:880px) {
  .hero-grid,.teacher,.offer {
    grid-template-columns: 1fr;
  }
  .grid3,.modules,.materials,.bonus-grid {
    grid-template-columns: 1fr;
  }
  .hero-grid {
    gap: var(--s-7);
  }
  .ficha {
    max-width: 520px;
  }
  .top .btn {
    display: none;
  }
  .hero {
    padding: var(--s-7) 0;
  }
  .statement {
    padding: var(--s-7) 0;
  }
  .hero h1 {
    max-width: 18ch;
  }
  .mobile {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    padding: 10px 14px;
    background: rgba(4,4,4,.97);
    border-top: 1px solid var(--line);
  }
  .mobile .btn {
    width: 100%;
  }
  body {
    padding-bottom: 74px;
  }
}

@media (max-width:520px) {
  .ficha {
    padding: var(--s-5);
  }
  .ficha-rows > div {
    grid-template-columns: 1fr;
    gap: var(--s-1);
  }
  .ficha-qr {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .btn:hover {
    transform: none;
  }
  *, *:before, *:after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --- Herdado de site-format-fixes.css --------------------------------------
   A página carregava esse arquivo do BETTAS_SITE. Estas são as únicas regras
   dele que afetavam elementos presentes aqui — copiadas sem alteração para o
   render continuar igual. Única poda: a regra de foco no original também lista
   input, select e textarea; esta página não tem nenhum desses elementos.
   Se você religar o site-format-fixes.css, apague este bloco para não duplicar.
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}
p, li, h1, h2, h3, h4, h5, h6, a, button, label, small, strong, span {
  overflow-wrap: anywhere;
  word-break: normal;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(240, 196, 88, .85);
  outline-offset: 3px;
}
@media print {
  .topbar, .mobile-menu, .cta-row, .footer, .no-print {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #111 !important;
  }
  main, section {
    padding: 16px 0 !important;
  }
  a {
    color: #111 !important;
    text-decoration: none !important;
  }
  .panel, .card {
    box-shadow: none !important;
    border: 1px solid #bbb !important;
  }
}

/* Declaração empilha abaixo de 880px. */
@media (max-width:880px) {
  .statement .container {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .statement h2 {
    padding-top: 0;
  }
}

/* Abaixo de 880px o título volta a quebrar sozinho e o QR desce de tamanho. */
@media (max-width:880px) {
  .hero h1 br {
    display: none;
  }
}
/* Entre 880 e 1200px a coluna da ficha encolhe e não sobra largura útil ao
   lado de um QR de 238px — a legenda desce para baixo dele. */
@media (max-width:1200px) {
  .ficha-qr {
    display: block;
  }
  .ficha-qr img {
    width: 100%;
    height: auto;
    max-width: 238px;
  }
  .ficha-qr p {
    margin-top: var(--s-3);
  }
}

/* Abaixo de 880px a ficha passa a ocupar a largura inteira, e aí o QR
   acompanha: quanto maior o módulo, mais fácil a câmera ler. Precisa vir
   depois da regra de 1200px para soltar o teto de 238px. */
@media (max-width:880px) {
  .ficha-qr img {
    max-width: none;
  }
}

/* Seções empilham numa coluna abaixo de 880px. */
@media (max-width:880px) {
  .grid3, .modules, .materials, .bonus-grid, .teacher {
    grid-template-columns: 1fr;
  }
  .modules {
    border-top: 0;
  }
  .module:first-child {
    border-top: 1px solid var(--rule);
  }
  .teacher {
    gap: var(--s-5);
  }
  .teacher img {
    max-width: 300px;
  }
  .offer {
    padding: var(--s-5);
  }
}