/* =========================================================================
   decode | vitrine (home e /eleve)
   Tokens vindos dos mockups aprovados (docs/design/*.dc.html) e do briefing
   (docs/design/briefing-design-decode.md). O app usa decode.css; a vitrine
   usa este arquivo. Os dois não se importam mutuamente — de propósito.
   ========================================================================= */

:root {
  --navy: #0f172a;
  --navy-2: #1b2740;          /* superfície dentro do navy */
  --navy-borda: #2a3852;
  --navy-rodape: #0b1220;
  --papel: #f2f4f7;
  --branco: #ffffff;

  --turquesa: #00c2b3;        /* ação primária, selo "4 etapas" */
  --turquesa-escura: #00a99c; /* etiquetas de seção sobre claro */
  --turquesa-clara: #5ee7db;  /* etiquetas sobre navy */
  --turquesa-check: #00857c;  /* selo "10 aulas no ar" */
  --turquesa-selo: #e6faf8;
  --sobre-turquesa: #05231f;

  --indigo: #6366f1;          /* SÓ o plano do professor (3 etapas) */
  --indigo-claro: #a5b4fc;
  --indigo-escuro: #4f46e5;

  --amarelo: #ffc53d;         /* bits acesos, "valores em estudo", "não validado" */
  --amarelo-selo: #fff6e0;
  --sobre-amarelo-selo: #8a6100;

  --texto-forte: #31405a;
  --texto: #51607a;
  --legenda: #8a97ac;
  --borda: #e4e9f0;
  --borda-clara: #c9d2de;
  --texto-sobre-navy: #b9c4d6;

  --fonte: "Poppins", "Helvetica Neue", Arial, sans-serif;

  --raio-bloco: 24px;
  --raio-cartao: 20px;
  --raio-botao: 14px;

  --container: 1216px;
  --gutter: 56px;
  --secao-y: 96px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte);
  background: var(--branco);
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
img { max-width: 100%; height: auto; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

@media (max-width: 767px) {
  :root { --gutter: 20px; --secao-y: 56px; }
}

/* =========================================================================
   /eleve — os 12 blocos do edital
   Componentes desta página. Os tokens acima não mudam.
   Rótulos, selos e legendas ficam entre 10 e 13px porque são etiqueta;
   todo texto que se lê como frase fica em 14px ou mais.
   ========================================================================= */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- 01 · capa ---------------------------------------------------------- */

.capa {
  position: relative;
  background: var(--navy);
  overflow: hidden;
}

.capa__grafismo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.07;
  pointer-events: none;
}

.capa__corpo {
  position: relative;
  padding-block: 72px 88px;
}

.capa__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* A altura manda e a largura acompanha a proporção do arquivo (360x84). O
   `flex: none` impede que a marca seja espremida quando o cabeçalho aperta:
   como a altura é fixa, encolher a largura a deformaria. */
.marca { display: block; width: auto; height: 30px; flex: none; }
.marca--sobre-navy { filter: brightness(0) invert(1); }

.chips { display: flex; flex-wrap: wrap; gap: 12px; }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: var(--texto-sobre-navy);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.capa__titulo {
  margin-top: 96px;
  max-width: 940px;
  font-size: 60px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--branco);
}

.capa__lead {
  margin-top: 28px;
  max-width: 800px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--texto-sobre-navy);
}

.contadores {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin: 56px 0 0;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.contador__num { margin: 0; font-size: 30px; font-weight: 600; color: var(--branco); }
.contador__rotulo { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--legenda); }

/* ---- estrutura comum das seções ---------------------------------------- */

.secao { padding-block: var(--secao-y); }
.secao--branco { background: var(--branco); }
.secao--papel { background: var(--papel); }
.secao--navy { background: var(--navy); }

.secao__etiqueta {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-weight: 600;
}

.secao__num { font-size: 13px; color: var(--borda-clara); }
.secao__num--escuro { color: #475569; }

.secao__nome {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--turquesa-escura);
}

.secao__nome--claro { color: var(--turquesa-clara); }

.secao__titulo {
  margin-top: 18px;
  max-width: 900px;
  font-size: 44px;
  line-height: 1.14;
}

.secao__titulo--claro { color: var(--branco); }

.secao__lead {
  margin-top: 20px;
  max-width: 900px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--texto);
}

.secao__lead--estreito { max-width: 780px; }
.secao__lead--claro { color: var(--texto-sobre-navy); }

.prosa {
  font-size: 19px;
  line-height: 1.7;
  color: var(--texto-forte);
}

.prosa + .prosa { margin-top: 22px; }
.prosa em { font-style: normal; font-weight: 600; }

/* ---- grades e cartões --------------------------------------------------- */

.grade {
  display: grid;
  gap: 16px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.grade--apertada { margin-top: 20px; }
.grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade--2-1 { grid-template-columns: 2fr 1fr; }

.cartao {
  padding: 28px 32px;
  border-radius: var(--raio-cartao);
}

.cartao--branco { background: var(--branco); border: 1px solid var(--borda); }
.cartao--papel { background: var(--papel); border: 1px solid var(--borda); }
.cartao--navy { background: var(--navy); }
.cartao--navy-2 { background: var(--navy-2); }
.cartao--turquesa { background: var(--turquesa); }
.cartao--contorno-navy { border: 1px solid var(--navy-borda); }

.cartao__titulo {
  margin-top: 16px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}

.cartao__titulo--claro { color: var(--branco); }

.cartao__texto {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto);
}

.cartao__texto--maior { font-size: 16px; line-height: 1.65; }
.cartao__texto--forte { color: var(--texto-forte); }
.cartao__texto--espacado { margin-top: 20px; }
.cartao__legenda { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--legenda); }

.cartao--navy .cartao__texto,
.cartao--navy-2 .cartao__texto { color: var(--texto-sobre-navy); }

.cartao--turquesa .cartao__titulo,
.cartao--turquesa .cartao__texto,
.cartao--turquesa .rotulo { color: var(--sobre-turquesa); }

.numerao {
  margin: 0;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.numerao--amarelo { color: var(--amarelo); }
.numerao--branco { color: var(--branco); }
.numerao--curto { font-size: 28px; line-height: 1.25; }
.cartao .numerao { margin-top: 18px; }
.cartao .numerao:first-child { margin-top: 0; }

.rotulo {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--legenda);
}

.rotulo--turquesa { color: var(--turquesa-escura); letter-spacing: 0.14em; }
.rotulo--turquesa-claro { color: var(--turquesa-clara); letter-spacing: 0.14em; }
.rotulo--indigo { color: var(--indigo-claro); }
.rotulo--indigo-escuro { color: var(--indigo-escuro); }
.rotulo--amarelo { color: var(--amarelo); letter-spacing: 0.14em; }

.destaque-turquesa { color: var(--turquesa-clara); }

/* ---- notas de rodapé de bloco ------------------------------------------ */

.nota { margin-top: 16px; padding: 26px 32px; }
.grade .nota { margin-top: 0; }
.nota--larga { margin-top: 20px; padding: 32px 36px; border-radius: var(--raio-bloco); }

.nota__texto {
  font-size: 17px;
  line-height: 1.7;
  color: var(--texto-forte);
}

.cartao--navy .nota__texto,
.nota__texto--claro { color: var(--branco); }

.nota__remate {
  margin-top: 14px;
  font-size: 22px;
  line-height: 1.45;
  font-weight: 600;
}

/* ---- selos -------------------------------------------------------------- */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin: 0;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.selo--turquesa { background: var(--turquesa); color: var(--sobre-turquesa); }
.selo--indigo { background: var(--indigo); color: var(--branco); }
.selo--check { background: var(--turquesa-selo); color: var(--turquesa-check); font-size: 13px; }
.selo--neutro { background: var(--branco); color: var(--texto); border: 1px solid var(--borda); font-size: 13px; }
.selo--amarelo { background: var(--amarelo-selo); color: var(--sobre-amarelo-selo); }
.selo--amarelo-forte { background: var(--amarelo); color: var(--navy); min-height: 26px; padding: 0 10px; }

.titulo-selado {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
}

.titulo-selado__texto { font-size: 22px; font-weight: 600; }
.titulo-selado__texto--claro { color: var(--branco); }

/* ---- 03 · as 4 etapas da aula ------------------------------------------ */

.etapas { margin-top: 22px; }

.etapa__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--turquesa-selo);
  color: var(--turquesa-escura);
  font-size: 15px;
  font-weight: 600;
}

/* ---- 04 · módulos da trilha -------------------------------------------- */

.modulo { border-top: 4px solid var(--borda-clara); }
.modulo--publicado { border-top-color: var(--turquesa); }
.modulo .cartao__titulo { margin-top: 12px; font-size: 20px; line-height: 1.25; }
.modulo .cartao__texto { margin-top: 12px; }
.modulo .selo { margin-top: 18px; }

/* ---- 05 · o byte da Aula 1 (a demo entra aqui na Tarefa 6) ------------- */

.byte {
  min-width: 0;
  padding: 30px;
  border-radius: var(--raio-cartao);
  background: var(--navy);
}

.byte__bits { display: flex; gap: 8px; justify-content: space-between; }

.bit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  height: 66px;
  border-radius: 12px;
  background: var(--navy-2);
  color: #64748b;
  font-size: 20px;
  font-weight: 600;
}

.bit--aceso { background: var(--amarelo); color: var(--navy); }

.byte__saida {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--navy-borda);
  text-align: center;
}

.byte__legenda { display: block; font-size: 12px; color: var(--legenda); }
.byte__valor { display: block; }
.byte__valor-num { display: block; font-size: 28px; font-weight: 600; color: var(--branco); }
.byte__valor-num--turquesa { color: var(--turquesa-clara); }
.byte__valor .byte__legenda { margin-top: 2px; }
.byte__seta { color: #64748b; flex-shrink: 0; }

.mascote { display: block; width: 190px; margin: 24px auto 0; }

.aula-um { margin-top: 28px; padding: 26px 30px; }
.aula-um .nota__texto { margin-top: 12px; font-size: 17px; line-height: 1.65; }

/* ---- 06 · a citação e o plano do professor ----------------------------- */

.citacao {
  margin: 36px 0 0;
  padding: 34px 38px;
  border-radius: var(--raio-bloco);
  background: var(--papel);
  border: 1px solid var(--borda);
}

.citacao__texto {
  margin: 16px 0 0;
  font-size: 24px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--navy);
}

.plano {
  margin-top: 20px;
  padding: 40px;
  border-radius: var(--raio-bloco);
  background: var(--navy);
}

.plano .titulo-selado { margin-top: 0; align-items: baseline; }
.plano__aviso { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--legenda); }
.plano__etapas { margin-top: 26px; }

.plano__etapa {
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--navy-2);
}

.plano__etapa-nome { margin-top: 8px; font-size: 18px; font-weight: 600; color: var(--branco); }

.plano__itens {
  gap: 20px;
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--navy-borda);
}

.plano__item-titulo { font-size: 16px; font-weight: 600; color: var(--branco); }
.plano__item-texto { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--legenda); }

/* ---- 09 · a tabela comparativa ----------------------------------------- */

.comparativo {
  margin-top: 36px;
  border-radius: var(--raio-bloco);
  background: var(--branco);
  border: 1px solid var(--borda);
  overflow-x: auto;           /* rola dentro do container, nunca a página */
  -webkit-overflow-scrolling: touch;
}

.comparativo__tabela {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
}

.comparativo__tabela th,
.comparativo__tabela td { padding: 20px 16px; vertical-align: top; }
.comparativo__tabela thead th,
.comparativo__tabela tbody th { padding-left: 24px; padding-right: 24px; }
.comparativo__tabela thead th:not(:first-child):not(.col-decode) { padding-inline: 16px; }

.comparativo__tabela thead th {
  background: #f8fafc;
  font-weight: 600;
  color: var(--texto);
}

.comparativo__tabela tbody th {
  width: 220px;
  font-weight: 600;
  color: var(--navy);
}

.comparativo__tabela tbody td { color: var(--texto); }
.comparativo__tabela tbody th,
.comparativo__tabela tbody td { border-top: 1px solid #eef2f6; }

.comparativo__tabela .col-decode {
  background: var(--navy);
  color: var(--branco);
  font-weight: 500;
}

.comparativo__tabela thead .col-decode { font-weight: 600; }
.comparativo__tabela tbody .col-decode { border-top-color: var(--navy-2); }
.comparativo__tabela .col-decode--realce { color: var(--turquesa-clara); }
.comparativo:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 2px; }

/* A mesma comparação em cartões: só aparece no mobile. */
.comparativo-cartoes { display: none; }

.comparado__nome { font-size: 16px; font-weight: 600; }
.cartao--navy .comparado__nome { color: var(--branco); }

.comparado__lista {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 6px;
  row-gap: 6px;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto);
}

.comparado__lista dt { color: var(--legenda); }
.comparado__lista dd { margin: 0; }
.cartao--navy .comparado__lista dd { color: var(--branco); }

/* ---- 10 · modelo de negócio -------------------------------------------- */

.lead-com-selo { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.lead-com-selo .selo { flex-shrink: 0; }

.rota { padding: 34px; }
.rota .preco { margin-top: 16px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.preco__valor { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; }
.preco__unidade { font-size: 16px; color: var(--texto); }
.cartao--navy .preco__valor { color: var(--branco); }
.cartao--navy .preco__unidade { color: var(--texto-sobre-navy); }
.rota .cartao__texto { margin-top: 14px; }
.cartao--navy .cartao__texto { color: var(--texto-sobre-navy); }

.conta { margin-top: 16px; padding: 34px; }
.conta__linha { margin-top: 22px; gap: 20px; }
.conta__num { margin: 0; font-size: 24px; font-weight: 600; }
.conta__texto { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--texto); }
.conta__metas { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--borda); }
.conta__metas .conta__num { margin-top: 8px; }
.conta__metas .conta__texto { margin-top: 4px; }

.nao-validado {
  margin-top: 16px;
  padding: 32px 36px;
  border-radius: var(--raio-cartao);
  background: var(--branco);
  border: 2px solid var(--navy);
}

.nao-validado__texto {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--navy);
}

/* ---- 11 · o time -------------------------------------------------------- */

.perfil { padding: 34px; }
.perfil__cabeca { display: flex; align-items: center; gap: 16px; }

.perfil__iniciais {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 600;
}

.perfil__iniciais--turquesa { background: var(--turquesa-selo); color: var(--turquesa-check); }
.perfil__iniciais--indigo { background: #eeeffe; color: var(--indigo-escuro); }
.perfil__nome { font-size: 20px; font-weight: 600; }
.perfil__cabeca .rotulo { margin-top: 2px; }
.perfil .cartao__texto { margin-top: 20px; }
.perfil .cartao__texto + .cartao__texto { margin-top: 14px; }

/* ---- 12 · o que precisamos e o rodapé ---------------------------------- */

.precisamos { margin-top: 44px; }
.precisamos .cartao { padding: 30px; }
.precisamos .cartao__titulo { margin-top: 14px; font-size: 20px; }
.precisamos .cartao__texto { margin-top: 10px; line-height: 1.65; }

.cartao--contorno-navy { padding: 30px 34px; }

.lista-clara {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.6;
  color: var(--branco);
}

.rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--navy-borda);
}

.rodape .marca { height: 26px; opacity: 0.9; }
.rodape__texto { font-size: 16px; line-height: 1.5; color: var(--texto-sobre-navy); }

/* =========================================================================
   Mobile — 390px de referência (EleveMobile.dc.html)
   ========================================================================= */

@media (max-width: 767px) {

  .capa__corpo { padding-block: 40px 44px; }
  .capa__topo { display: block; }
  .marca { height: 26px; }
  .chips { margin-top: 22px; gap: 8px; }
  .chip { font-size: 10px; min-height: 28px; padding: 0 12px; }

  .capa__titulo { margin-top: 28px; font-size: 32px; line-height: 1.15; }
  .capa__lead { margin-top: 18px; font-size: 16px; }

  .contadores {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 28px;
    padding-top: 22px;
  }
  .contador__num { font-size: 24px; }
  .contador__rotulo { margin-top: 2px; font-size: 12px; }

  .secao__etiqueta { gap: 12px; }
  .secao__num { font-size: 12px; }
  .secao__nome { font-size: 11px; }
  .secao__titulo { margin-top: 14px; font-size: 30px; line-height: 1.18; }
  .secao__lead { margin-top: 16px; font-size: 16px; }
  .prosa { font-size: 16px; }
  .prosa + .prosa { margin-top: 14px; }

  .grade,
  .grade--2,
  .grade--3,
  .grade--4,
  .grade--2-1 { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 26px; }
  .grade--apertada { margin-top: 14px; }

  .colunas,
  .colunas--texto-cartoes { display: block; }
  .colunas__texto { width: auto; }
  .colunas__lateral { margin-top: 24px; }

  /* No método, o mobile mostra o byte antes do cartão da Aula 1
     (EleveMobile.dc.html): as colunas viram uma pilha só. */
  .colunas--metodo { display: flex; flex-direction: column; }
  .colunas--metodo .colunas__texto,
  .colunas--metodo .colunas__lateral { display: contents; }
  .colunas--metodo .prosa { order: 1; }
  .colunas--metodo .byte { order: 2; margin-top: 24px; }
  .colunas--metodo .mascote { order: 3; }
  .colunas--metodo .aula-um { order: 4; }

  .cartao { padding: 22px 24px; border-radius: 18px; }
  .cartao__titulo { margin-top: 12px; font-size: 17px; }
  .numerao { font-size: 32px; }
  .numerao--curto { font-size: 24px; }
  .rotulo { font-size: 11px; }

  .nota { margin-top: 12px; padding: 20px; border-radius: 16px; }
  .nota--larga { margin-top: 14px; padding: 24px 20px; border-radius: 18px; }
  .nota__texto { font-size: 15px; }
  .nota__remate { margin-top: 12px; font-size: 19px; }

  .titulo-selado { margin-top: 26px; gap: 10px; }
  .titulo-selado__texto { font-size: 18px; }
  .selo { font-size: 11px; min-height: 26px; padding: 0 11px; }
  .selo--check, .selo--neutro { font-size: 12px; }

  .etapas { margin-top: 16px; }
  .etapa { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; padding: 18px; border-radius: 14px; }
  .etapa__num { width: 30px; height: 30px; border-radius: 9px; font-size: 14px; grid-row: 1 / span 2; }
  .etapa .cartao__titulo { margin-top: 0; font-size: 16px; }
  .etapa .cartao__texto { margin-top: 4px; font-size: 14px; line-height: 1.55; }

  .modulo { border-top: 1px solid var(--borda); border-left: 4px solid var(--borda-clara); }
  .modulo--publicado { border-top-color: var(--borda); border-left-color: var(--turquesa); }
  .modulo .cartao__titulo { margin-top: 8px; font-size: 18px; }
  .modulo .cartao__texto { margin-top: 8px; }
  .modulo .selo { margin-top: 14px; }

  .byte { padding: 22px 18px; border-radius: 18px; }
  .byte__bits { gap: 5px; }
  .bit { height: 44px; border-radius: 9px; font-size: 15px; }
  .byte__saida { gap: 14px; margin-top: 18px; padding-top: 16px; }
  .byte__valor-num { font-size: 22px; }
  .byte__valor .byte__legenda { display: none; }
  .mascote { width: 120px; margin-top: 16px; }
  .aula-um { margin-top: 14px; padding: 20px; }
  .aula-um .nota__texto { font-size: 15px; }

  .citacao { margin-top: 24px; padding: 24px 20px; border-radius: 18px; }
  .citacao__texto { margin-top: 12px; font-size: 18px; line-height: 1.55; }

  .plano { margin-top: 14px; padding: 24px 20px; border-radius: 20px; }
  .plano .titulo-selado { align-items: center; }
  .plano__aviso { margin-top: 8px; font-size: 14px; }
  .plano__etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
  .plano__etapa { padding: 14px 10px; border-radius: 12px; text-align: center; }
  .plano__etapa .rotulo { font-size: 10px; letter-spacing: 0.1em; }
  .plano__etapa-nome { margin-top: 6px; font-size: 14px; }
  .plano__itens { gap: 14px; margin-top: 20px; padding-top: 18px; }
  .plano__item-titulo { font-size: 15px; }
  .plano__item-texto { margin-top: 4px; font-size: 14px; line-height: 1.55; }

  .comparativo { display: none; }

  .comparativo-cartoes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
  }

  .comparado { padding: 20px; border-radius: 18px; }

  .lead-com-selo { display: block; }
  .lead-com-selo .selo { margin-top: 14px; }

  .rota { padding: 24px; }
  .rota .preco { display: block; margin-top: 12px; }
  .preco__valor { display: block; font-size: 32px; }
  .preco__unidade { display: block; font-size: 15px; }
  .rota .cartao__texto { margin-top: 12px; font-size: 15px; }

  .conta { margin-top: 12px; padding: 24px; }
  .conta__linha,
  .conta__metas { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .conta__linha { margin-top: 16px; }
  .conta__metas { margin-top: 18px; padding-top: 16px; }
  .conta__num { font-size: 20px; }
  .conta__texto { margin-top: 2px; }

  .nao-validado { margin-top: 12px; padding: 24px; border-radius: 18px; }
  .nao-validado__texto { margin-top: 14px; font-size: 16px; }

  .perfil { padding: 24px; }
  .perfil__cabeca { gap: 14px; }
  .perfil__iniciais { width: 48px; height: 48px; font-size: 16px; }
  .perfil__nome { font-size: 17px; }
  .perfil .cartao__texto { margin-top: 16px; font-size: 15px; }
  .perfil .cartao__texto + .cartao__texto { margin-top: 12px; }

  .precisamos { margin-top: 26px; }
  .precisamos .cartao { padding: 22px; }
  .precisamos .cartao__titulo { margin-top: 10px; font-size: 18px; }
  .precisamos .cartao__texto { margin-top: 8px; }

  .cartao--contorno-navy { padding: 22px; }
  .lista-clara { gap: 8px; margin-top: 14px; font-size: 14px; }

  .rodape { flex-direction: column; align-items: center; gap: 12px; margin-top: 36px; padding-top: 26px; }
  .rodape .marca { height: 22px; }
  .rodape__texto { font-size: 14px; text-align: center; }
}

/* Colunas de duas frações no desktop (02, 05). */
@media (min-width: 768px) {
  .colunas { display: flex; gap: 56px; margin-top: 36px; }
  .colunas--metodo { margin-top: 32px; }
  .colunas--texto-cartoes .colunas__texto { flex: 0 1 620px; min-width: 0; }
  .colunas--metodo .colunas__texto { flex: 0 1 600px; min-width: 0; }
  .colunas__lateral { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
  .colunas--metodo .colunas__lateral { gap: 0; }
}

/* =========================================================================
   Home — as 8 seções + faixa de marca (Main.dc.html, HomeMobile.dc.html)
   Só o que a /eleve ainda não tinha. Onde a home precisa de um comportamento
   diferente de um componente compartilhado, o seletor é prefixado com .home
   para não mexer na /eleve.
   ========================================================================= */

.hero, .secao, .aula1 { scroll-margin-top: 84px; }

/* ---- topo fixo e menus -------------------------------------------------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borda);
}

.topo__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--container);
  min-height: 76px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* `flex: none` porque este link é um item do flex do cabeçalho: sem ele a
   barra o encolhe quando o menu aperta e, com a altura da marca travada, a
   imagem sai deformada. */
.topo__marca { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.topo .marca { height: 26px; }

.menu {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  font-weight: 500;
  color: var(--texto);
}

.menu__link { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.topo__acoes { display: flex; align-items: center; gap: 20px; }

.entrar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--legenda);
}

.menu__link:hover,
.entrar:hover,
.rodape-site__link:hover { color: var(--turquesa-escura); }

.menu-botao {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--branco);
  color: var(--navy);
  cursor: pointer;
}

.menu-mobile { display: none; }
.menu-caixa:checked ~ .menu-mobile { display: flex; }

/* ---- botões ------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
}

.botao--grande {
  min-height: 56px;
  padding: 0 28px;
  border-radius: var(--raio-botao);
  font-size: 16px;
}

.botao { white-space: nowrap; }
.botao--turquesa { background: var(--turquesa); color: var(--sobre-turquesa); }
.botao--fantasma { border: 1px solid rgba(255, 255, 255, 0.28); color: var(--branco); font-weight: 500; }
.botao--amarelo { min-height: 52px; padding: 0 24px; background: var(--amarelo); color: var(--navy); font-size: 15px; }

.botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 40px; }

.so-mobile { display: none; }

/* ---- 1 · início --------------------------------------------------------- */

.hero { position: relative; background: var(--navy); overflow: hidden; }

.hero__corpo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 64px;
  padding-block: 96px 104px;
}

.hero__texto { flex: 0 1 660px; min-width: 0; }
.hero__painel { flex-grow: 1; min-width: 0; }

.chip--turquesa { border-color: rgba(0, 194, 179, 0.45); color: var(--turquesa-clara); }

.hero__titulo {
  margin-top: 28px;
  font-size: 54px;
  line-height: 1.08;
  color: var(--branco);
}

.hero__lead {
  margin-top: 26px;
  max-width: 600px;
  font-size: 19px;
  line-height: 1.62;
  color: var(--texto-sobre-navy);
}

.navegador {
  border-radius: var(--raio-cartao);
  background: var(--branco);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.navegador__barra {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  background: var(--papel);
  border-bottom: 1px solid var(--borda);
}

.navegador__bola { width: 9px; height: 9px; border-radius: 999px; background: #d3dae4; }
.navegador__url { margin-left: 12px; font-size: 11px; color: var(--legenda); }
.navegador__corpo { padding: 24px; }
.navegador__titulo { margin-top: 8px; font-size: 20px; font-weight: 600; }

.mini-etapas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.mini-etapa { padding: 12px 10px; border: 1px solid var(--borda); border-radius: 12px; background: var(--papel); }
.mini-etapa__num { display: block; font-size: 11px; font-weight: 600; color: var(--legenda); }
.mini-etapa__nome { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; }
.mini-etapa--ativa { background: var(--turquesa); border-color: var(--turquesa); }
.mini-etapa--ativa .mini-etapa__num,
.mini-etapa--ativa .mini-etapa__nome { color: var(--sobre-turquesa); }

.byte--compacto { margin-top: 18px; padding: 20px; border-radius: 16px; }
.byte--compacto .bit { height: 52px; border-radius: 10px; font-size: 18px; }

.byte__linha {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  font-size: 12px;
}

.byte__linha .byte__legenda { display: inline; }
.byte__letra { font-size: 20px; font-weight: 600; color: var(--branco); }

/* ---- 2 · o produto ------------------------------------------------------ */

.contagem .cartao__titulo { margin-top: 6px; font-size: 17px; }
.porque { margin-top: 56px; max-width: 880px; }
.porque .prosa { margin-top: 14px; }

.frase-forte { margin-top: 32px; padding: 28px 32px; }
.frase-forte__texto { font-size: 22px; line-height: 1.45; font-weight: 600; }

/* ---- 3 · o método ------------------------------------------------------- */

.secao--sem-fim { padding-bottom: 0; }
.colunas__lateral--mascote { justify-content: center; }
.colunas--texto-cartoes .colunas__lateral--mascote { flex-grow: 1; }
.home .mascote { width: 238px; margin-top: 0; }

.aula1 {
  display: flex;
  align-items: center;
  gap: 56px;
  margin-top: 56px;
  padding: 48px;
  border-radius: var(--raio-bloco);
  background: var(--navy);
}

.aula1__texto { flex: 0 1 560px; min-width: 0; }
.aula1__demo { flex-grow: 1; min-width: 0; }
.aula1__titulo { margin-top: 14px; font-size: 30px; line-height: 1.2; color: var(--branco); }
.aula1__lead { margin-top: 18px; font-size: 17px; line-height: 1.7; color: var(--texto-sobre-navy); }
.aula1 .botao { margin-top: 28px; }

.byte--navy-2 { padding: 26px; border-radius: 18px; background: var(--navy-2); }
.bit--fundo-navy { background: var(--navy); }

/* ---- 4 · como é a aula -------------------------------------------------- */

.secao__titulo--largo { max-width: 900px; }

.grupo { margin-top: 44px; padding: 40px; border-radius: var(--raio-bloco); }
.grupo--papel { background: var(--papel); border: 1px solid var(--borda); }
.grupo .titulo-selado { margin-top: 0; align-items: baseline; }
.grupo .etapas { margin-top: 28px; }

.home .titulo-selado { flex-wrap: wrap; }
.titulo-selado__nota { font-size: 15px; color: var(--texto); }
.titulo-selado__nota--claro { color: var(--legenda); }

.separador {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 36px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--texto-forte);
  text-align: center;
}

.separador::before,
.separador::after { content: ""; flex: 1 1 0; height: 1px; background: var(--borda); }

.home .plano { margin-top: 0; }
.citacao-plano { margin: 22px 0 0; padding: 26px 30px; border-radius: 18px; }
.citacao-plano__texto { margin-top: 14px; font-size: 20px; line-height: 1.55; color: var(--branco); }

.home .plano__etapas { margin-top: 28px; }
.home .plano__etapa .cartao__texto { margin-top: 8px; color: var(--texto-sobre-navy); }

.regua { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--navy-borda); }
.regua .plano__aviso { margin-top: 0; }
.home .plano__itens { margin-top: 18px; padding-top: 0; border-top: 0; }
.home .plano__item { display: flex; align-items: flex-start; gap: 12px; }
.home .plano__item-titulo { font-size: 15px; }
.home .plano__item-texto { margin-top: 4px; font-size: 14px; line-height: 1.55; }
.plano__icone { flex-shrink: 0; margin-top: 2px; }
.plano__icone--turquesa { color: var(--turquesa); }
.plano__icone--amarelo { color: var(--amarelo); }

/* ---- 6 · comprovação ---------------------------------------------------- */

.comprovacao { position: relative; overflow: hidden; }

.comprovacao__padrao {
  position: absolute;
  inset: 0;
  background: url("/assets/img/vitrine/padrao.jpg") center / 620px;
  opacity: 0.05;
  pointer-events: none;
}

.comprovacao__corpo { position: relative; }

/* O texto da comprovação é uma coluna estreita ao lado do documento. */
@media (min-width: 768px) {
  .comprovacao__corpo .colunas__texto { flex: 0 0 500px; }
  .comprovacao__corpo .colunas { gap: 72px; }
  .colunas--contato { gap: 72px; }
  .colunas--contato .colunas__texto { flex: 0 0 640px; }
}
.colunas--sem-topo { margin-top: 0; }

.documento {
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  background: var(--branco);
  box-shadow: 0 24px 60px -30px rgba(15, 23, 42, 0.35);
  overflow: hidden;
}

.documento__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--borda);
}

.documento__titulo { font-size: 16px; font-weight: 600; }
.documento__sub { margin-top: 2px; font-size: 13px; color: var(--legenda); }

.documento__rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* O corpo da tabela é texto de leitura: 14px, não 13px. */
.documento__tabela { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
.documento__tabela th,
.documento__tabela td { padding: 14px 12px; vertical-align: top; }
.documento__tabela th:first-child,
.documento__tabela td:first-child { padding-left: 24px; }
.documento__tabela th:last-child,
.documento__tabela td:last-child { padding-right: 24px; }

.documento__tabela thead th {
  padding-block: 12px;
  background: #f8fafc;
  font-size: 13px;
  font-weight: 600;
  color: var(--legenda);
}

.documento__tabela tbody th { font-weight: 600; color: var(--navy); }
.documento__tabela tbody td { color: var(--texto-forte); }
.documento__tabela tbody th,
.documento__tabela tbody td { border-top: 1px solid #eef2f6; }
.documento__codigo { color: var(--texto); white-space: nowrap; }

.documento__pe { padding: 16px 24px; background: #f8fafc; border-top: 1px solid #eef2f6; }
.documento__pe-texto { font-size: 14px; line-height: 1.6; color: var(--texto); }
.documento__pe-texto + .documento__pe-texto { margin-top: 8px; }

/* ---- 7 · quem somos ----------------------------------------------------- */

.papel-decode { padding: 34px; }
.papel-decode__nome { margin-top: 12px; font-size: 22px; }
.papel-decode .cartao__texto--forte strong { font-weight: 600; }
.home .nota__texto strong { font-weight: 600; }

/* ---- faixa de marca ----------------------------------------------------- */

.faixa-marca { height: 140px; background: url("/assets/img/vitrine/faixa.jpg") center / 620px; }

/* ---- 8 · falar com a decode e rodapé ------------------------------------ */

.botao-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60px;
  margin-top: 36px;
  padding: 0 32px;
  border-radius: 16px;
  background: var(--turquesa);
  color: var(--sobre-turquesa);
  font-size: 17px;
  font-weight: 600;
}


.balao { padding: 24px; }

.balao__texto {
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: 16px 16px 16px 4px;
  background: var(--turquesa);
  color: var(--sobre-turquesa);
  font-size: 16px;
  line-height: 1.55;
}

.rodape-site { padding-block: 32px; background: var(--navy-rodape); }

.rodape-site__corpo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.rodape-site .marca { height: 22px; opacity: 0.85; }

.rodape-site__direita {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 13px;
  color: #64748b;
}

.rodape-site__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--legenda); }

/* =========================================================================
   Home no mobile — 390px de referência (HomeMobile.dc.html)
   ========================================================================= */

@media (max-width: 767px) {

  .hero, .secao, .aula1 { scroll-margin-top: 68px; }

  .topo__barra { gap: 10px; min-height: 64px; }
  .menu, .entrar { display: none; }
  .menu-botao { display: flex; }
  .topo__acoes { gap: 10px; }
  .topo .marca { height: 22px; }

  .menu-mobile {
    flex-direction: column;
    padding: 8px var(--gutter) 16px;
    border-top: 1px solid var(--borda);
    background: var(--branco);
  }

  .menu-mobile__link { display: flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; }
  .menu-mobile__link--discreto { font-size: 14px; color: var(--legenda); }

  .botao { gap: 6px; padding: 0 14px; font-size: 13px; }
  .so-mobile { display: inline; }
  .so-desktop { display: none; }

  .hero__corpo { display: block; padding-block: 44px 48px; }
  .chip--turquesa { min-height: 28px; padding: 0 12px; font-size: 10px; }
  .hero__titulo { margin-top: 20px; font-size: 32px; line-height: 1.14; }
  .hero__lead { margin-top: 18px; font-size: 16px; line-height: 1.65; }
  .botoes { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 28px; }
  .botoes .botao { min-height: 54px; padding: 0 20px; font-size: 16px; }
  .hero__painel { margin-top: 32px; }

  .navegador { border-radius: 18px; }
  .navegador__barra { gap: 6px; height: 34px; padding: 0 14px; }
  .navegador__bola { width: 7px; height: 7px; }
  .navegador__url { margin-left: 8px; font-size: 10px; }
  .navegador__corpo { padding: 18px; }
  .navegador__titulo { margin-top: 6px; font-size: 17px; }
  .mini-etapas { display: none; }

  .byte--compacto { margin-top: 14px; padding: 16px; border-radius: 14px; }
  .byte--compacto .bit { height: 40px; border-radius: 8px; font-size: 14px; }
  .byte__linha { justify-content: center; gap: 10px; margin-top: 14px; font-size: 11px; }
  .byte__letra { font-size: 18px; }

  .contagem .cartao { display: flex; align-items: baseline; gap: 12px; }
  .contagem .numerao { font-size: 30px; }
  .contagem .cartao__titulo { margin-top: 0; font-size: 16px; }

  .porque { margin-top: 36px; }
  .porque .prosa { margin-top: 12px; }
  .frase-forte { margin-top: 24px; padding: 24px; }
  .frase-forte__texto { font-size: 19px; }

  .home .mascote { width: 120px; margin: 0 auto; }
  .colunas--texto-cartoes .colunas__lateral--mascote { margin-top: 20px; }

  /* No mobile o byte vem antes do botão (HomeMobile.dc.html). */
  .aula1 { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 24px; padding: 26px 22px; border-radius: 20px; }
  .aula1__texto, .aula1__demo { display: contents; }
  .aula1 .rotulo { order: 1; }
  .aula1__titulo { order: 2; }
  .aula1__lead { order: 3; }
  .aula1 .byte { order: 4; margin-top: 20px; }
  .aula1 .botao { order: 5; }
  .aula1__titulo { margin-top: 12px; font-size: 22px; line-height: 1.25; }
  .aula1__lead { margin-top: 12px; font-size: 15px; }
  .aula1 .botao { display: flex; width: 100%; margin-top: 22px; min-height: 50px; font-size: 15px; }
  .byte--navy-2 { padding: 16px; border-radius: 14px; }

  .grupo { margin-top: 28px; padding: 24px 20px; border-radius: 20px; }
  .grupo .titulo-selado { align-items: center; }
  .grupo .etapas { margin-top: 18px; }
  .titulo-selado__nota { width: 100%; font-size: 14px; }

  .separador { gap: 12px; margin: 24px 0; font-size: 14px; }

  .home .plano { padding: 24px 20px; }
  .citacao-plano { margin-top: 18px; padding: 20px; border-radius: 14px; }
  .citacao-plano__texto { margin-top: 10px; font-size: 16px; line-height: 1.6; }

  .home .plano__etapas { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; }
  .home .plano__etapa { padding: 16px 18px; border-radius: 14px; text-align: left; }
  .home .plano__etapa .rotulo { font-size: 11px; letter-spacing: 0.12em; }
  .home .plano__etapa-nome { margin-top: 6px; font-size: 16px; }
  .home .plano__etapa .cartao__texto { margin-top: 4px; font-size: 14px; line-height: 1.55; }

  .regua { margin-top: 20px; padding-top: 18px; }
  .home .plano__itens { gap: 12px; margin-top: 14px; }

  .documento { border-radius: 18px; }
  .documento__cabeca { padding: 16px 18px; }
  .documento__titulo { font-size: 15px; }
  .documento__sub { font-size: 12px; }
  .documento__tabela th,
  .documento__tabela td { padding: 12px 8px; }
  .documento__tabela th:first-child,
  .documento__tabela td:first-child { padding-left: 18px; }
  .documento__tabela th:last-child,
  .documento__tabela td:last-child { padding-right: 18px; }
  .documento__pe { padding: 14px 18px; }

  .papel-decode { padding: 24px; }
  .papel-decode__nome { margin-top: 10px; font-size: 19px; }

  .faixa-marca { height: 96px; background-size: 420px; }

  /* No contato, o mobile mostra o balão antes do botão (HomeMobile.dc.html). */
  .colunas--contato { display: flex; flex-direction: column; }
  .colunas--contato .colunas__texto,
  .colunas--contato .colunas__lateral { display: contents; }
  .colunas--contato .secao__etiqueta { order: 1; }
  .colunas--contato .secao__titulo { order: 2; }
  .colunas--contato .secao__lead { order: 3; }
  .colunas--contato .balao { order: 4; margin-top: 24px; padding: 20px; }
  .colunas--contato .botao-whatsapp { order: 5; margin-top: 20px; }

  .balao__texto { margin-top: 14px; padding: 16px 18px; border-radius: 14px 14px 14px 4px; font-size: 15px; }

  .botao-whatsapp { display: flex; width: 100%; min-height: 58px; padding: 0 20px; }

  .rodape-site { padding-block: 26px; }
  .rodape-site__corpo { flex-direction: column; gap: 12px; text-align: center; }
  .rodape-site .marca { height: 20px; }
  .rodape-site__direita { flex-direction: column; gap: 4px; font-size: 12px; }
}

/* =========================================================================
   /eleve — a página do vídeo
   Página inteira sobre navy, sem JavaScript. Reaproveita .container, .marca,
   .chip e .botao. O vídeo mantém 16:9 em qualquer largura.
   ========================================================================= */

.pagina-video { background: var(--navy); }

.video-pagina { min-height: 100vh; display: flex; align-items: center; }

.video-pagina__corpo { padding-block: 72px; width: 100%; }

.video-pagina__chips { margin-top: 32px; }

.video-pagina__titulo {
  margin-top: 28px;
  max-width: 900px;
  font-size: 44px;
  line-height: 1.14;
  color: var(--branco);
}

.video-pagina__lead {
  margin-top: 20px;
  max-width: 760px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--texto-sobre-navy);
}

.video {
  margin-top: 40px;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--navy-borda);
  border-radius: var(--raio-bloco);
  overflow: hidden;
  background: var(--navy-2);
}

.video__player { width: 100%; height: 100%; border: 0; display: block; }

.video__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px;
}

.video__placeholder-titulo { font-size: 18px; font-weight: 600; color: var(--branco); }
.video__placeholder-texto { font-size: 14px; color: var(--legenda); }

.video-pagina__demo { margin-top: 36px; }
.video-pagina__demo .botao { margin: 0; }

.video-pagina__demo-texto {
  margin-top: 14px;
  max-width: 560px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--legenda);
}

.video-pagina__rodape {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 14px;
  line-height: 1.6;
  color: var(--legenda);
}

@media (max-width: 767px) {
  .video-pagina { align-items: flex-start; }
  .video-pagina__corpo { padding-block: 44px; }
  .video-pagina__titulo { font-size: 30px; }
  .video-pagina__lead { font-size: 16px; }
  .video { margin-top: 28px; border-radius: var(--raio-cartao); }
  .video-pagina__rodape { margin-top: 44px; }
}