/* =============================================================
   ESTILO — Meu Peptídeo Quiz
   Mobile primeiro (base 390px). No desktop vira um "app" de 460px
   centralizado na janela.
   Toda cor, fonte, raio e espaçamento é uma variável definida aqui
   embaixo. Depois do bloco :root nenhuma cor pode ser escrita
   direto numa regra.
   ============================================================= */

:root {
  /* ---- Cores (as mesmas do app real) ---- */
  --fundo: #F2F2F7;
  --card: #FFFFFF;
  --texto: #111111;
  --texto-secundario: #8E8E93;
  --texto-suave: rgba(17,17,17,0.8);       /* texto principal a 80%, dentro dos destaques */
  --divisoria: #EFEFEF;
  --azul: #3B82F6;
  --azul-gradiente: #5B8DEF;
  --azul-suave: #E8F0FE;
  --azul-claro: #BFDBFE;
  --desabilitado: #D8D8DC;
  --pilula-inativa: #EDEDEF;
  --sucesso: #22C55E;
  --alerta-texto: #D97706;
  --alerta-fundo: #FDEBD9;
  --texto-invertido: #FFFFFF;              /* texto sobre o azul e sobre o cinza do botão */
  --texto-invertido-suave: rgba(255,255,255,0.8);   /* data na tela de bloqueio */
  --notificacao-fundo: rgba(255,255,255,0.92);      /* cartão de notificação, sobre o desfoque */
  --brilho: rgba(255,255,255,0.18);                 /* clarão do papel de parede da tela de bloqueio */
  --vermelho: #EF4444;                     /* faixa mais baixa do índice e o desconto */
  --faixa-1: var(--vermelho);              /* 0 a 24  — No escuro */
  --faixa-2: var(--alerta-texto);          /* 25 a 49 — Frágil */
  --faixa-3: var(--azul);                  /* 50 a 74 — Parcial */
  --faixa-4: var(--sucesso);               /* 75 a 100 — Sob controle */
  --trilho-invertido: rgba(255,255,255,0.25);       /* medidor sobre o fundo azul */
  --texto-invertido-forte: rgba(255,255,255,0.88);  /* texto dos ganhos */
  --caixa-invertida: rgba(255,255,255,0.12);        /* caixa do remate */
  --fundo-pagina: #E8E8ED;                 /* fundo da janela no desktop, atrás do "app" */
  --moldura: #E5E5EA;                      /* borda do "aparelho" na tela de abertura */
  --sombra-card: 0 4px 12px rgba(0,0,0,0.06);
  --sombra-app: 0 8px 40px rgba(0,0,0,0.10);

  /* ---- Tipografia ---- */
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-titulo: 26px;          --peso-titulo: 800;  --lh-titulo: 31px;  --ls-titulo: -0.4px;
  --fs-corpo: 15px;           --peso-corpo: 400;   --lh-corpo: 20px;
  --fs-reacao: 14px;                               /* só a frase de reação */
  --fs-corpo-pequeno: 13px;
  --fs-selo: 11px;                                 /* só os selos da abertura */
  --fs-titulo-card: 16px;     --peso-titulo-card: 700;
  --peso-destaque: 600;       /* frases de destaque no corpo do texto */
  --fs-hora: 44px;            --peso-hora: 300;   /* relógio da tela de bloqueio */
  --fs-indice: 72px;                              /* o número do Índice de Controle */
  --fs-frase: 17px;           --lh-frase: 1.3;    /* frase de destaque em cartão */
  --fs-marcador: 18px;                            /* o ✓ / × das listas institucionais */
  --fs-garantia: 12px;                            /* texto das garantias da oferta */
  --fs-legal: 11px;           --lh-legal: 1.5;    /* o texto legal embaixo do botão */
  --fs-miudo: 10px;           /* nome do app e "agora" no cartão de notificação */
  --fs-rotulo: 12px;          --peso-rotulo: 600;  --ls-rotulo: 0.5px;
  --ls-etiqueta: 0.8px;       /* só a etiqueta "demonstração" */
  --fs-botao: 16px;           --peso-botao: 600;
  --fs-numero-grande: 26px;   --peso-numero-grande: 700;

  /* ---- Raios ---- */
  --raio-card: 22px;
  --raio-pilula: 999px;
  --raio-pequeno: 10px;
  --raio-medio: 16px;
  --raio-app: 28px;           /* cantos do "app" no desktop e da moldura de aparelho */
  --raio-tela: 20px;          /* cantos da tela dentro da moldura de aparelho */
  --altura-grafico: 180px;      /* área das barras da tela de custo */
  --altura-minima-barra: 24px;  /* a barra do preço nunca some */

  /* ---- Espaçamentos (múltiplos de 4) ---- */
  --espaco-4: 4px;
  --espaco-6: 6px;            /* exceção: espaço entre os selos da abertura */
  --espaco-8: 8px;
  --espaco-10: 10px;          /* exceção: padding lateral dos selos da abertura */
  --espaco-12: 12px;
  --espaco-16: 16px;
  --espaco-20: 20px;
  --espaco-24: 24px;
  --espaco-28: 28px;
  --espaco-32: 32px;
  --desvanecimento: 56px;     /* altura do esmaecimento na sangria do aparelho */
  --desvanecimento-rolagem: 40px; /* pista no pé da área de conteúdo */
  --padding-plano: 14px;      /* padding dos cartões de plano, mais compactos */
  --margem-tela: 20px;        /* margem lateral da tela */
  --padding-card: 18px;       /* padding interno de card */
  --espaco-cards: 14px;       /* espaço entre cards */

  /* ---- Movimento ---- */
  --transicao: 260ms;         /* transição completa entre telas */
  --meia-transicao: 130ms;    /* metade: sai a tela velha, entra a nova */
  --transicao-progresso: 300ms; /* enchimento da barra de progresso */
  --transicao-nome: 200ms;    /* cruzamento do nome da etapa */
  --transicao-frase: 250ms;   /* cruzamento das frases da tela de espera */
  --crescimento-das-barras: 700ms; /* as barras da tela de custo subindo */
  --queda-notificacao: 240ms; /* a notificação deslizando de cima */
  --espera-notificacao: 900ms;/* quanto ela demora para cair */
  --mola: 220ms;              /* "molinha" do cartão selecionado */
  --anel: 420ms;              /* anel que floresce no cartão selecionado */
}

/* ============================ base ============================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* No celular, 100% pode valer mais que a área realmente visível (a barra
   do navegador come o resto), e aí o rodapé sai da tela levando o fim do
   conteúdo junto. A unidade dinâmica mede o que dá para ver de verdade. */
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--fs-corpo);
  font-weight: var(--peso-corpo);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Contêiner tipo aplicativo: ocupa tudo no celular, 460px no desktop */
.app {
  width: 100%;
  max-width: 460px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  overflow: hidden;
}

/* No desktop vira um aparelho centralizado sobre um fundo mais escuro */
@media (min-width: 461px) {
  body { background: var(--fundo-pagina); }

  .app {
    height: min(880px, calc(100vh - var(--espaco-32)));
    border-radius: var(--raio-app);
    box-shadow: var(--sombra-app);
  }

  @supports (height: 100dvh) {
    .app { height: min(880px, calc(100dvh - var(--espaco-32))); }
  }
}

/* ========================== cabeçalho ========================= */

.cabecalho {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-12);
  padding: var(--espaco-16) var(--margem-tela) var(--espaco-12);
  background: var(--fundo);
}

.voltar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--raio-pilula);
  background: var(--card);
  color: var(--texto);
  box-shadow: var(--sombra-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.voltar:active { background: var(--pilula-inativa); }

/* ---- barra de progresso ----
   Os quatro segmentos têm sempre a mesma largura e não se mexem.
   Etapa concluída: cheia de azul. Etapa atual: cheia na proporção
   do avanço. Etapa futura: cinza.
   O nome da etapa fica numa linha própria, centralizada embaixo da
   barra inteira, com altura fixa — nada empurra nada. */

.progresso {
  flex: 1 1 auto;
  min-width: 0;
}

.barra {
  display: flex;
  align-items: center;
  gap: var(--espaco-6);
  height: 32px;               /* mesma altura do botão de voltar, para a barra ficar no meio dele */
}

.segmento {
  flex: 1 1 0;
  min-width: 0;
}

.segmento__trilho {
  display: block;
  height: 4px;
  border-radius: var(--raio-pilula);
  background: var(--pilula-inativa);
  overflow: hidden;
}

.segmento__preenchimento {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--raio-pilula);
  background: linear-gradient(90deg, var(--azul), var(--azul-gradiente));
  transition: width var(--transicao-progresso) ease;
}

/* linha de altura fixa: o nome novo aparece enquanto o antigo some */
.etapa-nome {
  position: relative;
  height: 16px;
  margin-top: var(--espaco-4);
}

.etapa-nome__texto {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--ls-rotulo);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--azul);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity var(--transicao-nome) ease;
}

.etapa-nome__texto--visivel { opacity: 1; }

/* =========================== conteúdo ========================= */

/* O conteúdo começa sempre no topo, logo abaixo do cabeçalho.
   A sobra de espaço fica embaixo, entre o último elemento e o rodapé.
   Quando o conteúdo é mais alto que a área, ele rola a partir do topo. */
/* A área existe só para ancorar a pista de rolagem por cima do fim do
   conteúdo, sem que ela role junto. */
.area {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.conteudo {
  flex: 1 1 auto;
  /* É ESTE min-height (aqui e na .area) que liga a rolagem. Sem ele, o
     padrão de um item de flex é não encolher abaixo do próprio conteúdo:
     a área cresce, empurra o rodapé para fora da tela e o fim do conteúdo
     (inclusive o aviso obrigatório do índice) fica inalcançável. Não remova. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* pista de rolagem: diz "tem mais coisa embaixo" sem cortar seco */
.pista {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--desvanecimento-rolagem);
  background: linear-gradient(to bottom, transparent, var(--fundo));
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transicao-nome) ease;
}

.pista--visivel { opacity: 1; }

.tela {
  padding: var(--espaco-28) var(--margem-tela) var(--espaco-32);
}

.titulo {
  margin: 0 0 var(--espaco-12);
  font-size: var(--fs-titulo);
  font-weight: var(--peso-titulo);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  color: var(--texto);
}

.subtitulo {
  margin: 0 0 var(--espaco-24);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: var(--texto-secundario);
}

/* ------------------------- tela de abertura ------------------- */

/* A abertura é a única tela em coluna: o aparelho fica por último e
   ocupa toda a sobra de espaço, sangrando pela borda de baixo. */
.tela--abertura {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 0;          /* o aparelho encosta na borda da área de conteúdo */
}

/* Moldura de aparelho — componente, usado na abertura e no lembrete.
   Largura em porcentagem, altura elástica: sem vh em lugar nenhum. */
.moldura {
  position: relative;
  width: 76%;
  margin: var(--espaco-20) auto 0;
  border: var(--espaco-8) solid var(--moldura);
  border-radius: var(--raio-app);
  background: var(--moldura);
  overflow: hidden;           /* nada vaza pelos cantos */
}

.moldura__imagem,
.moldura__vazia {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--raio-tela);
}

/* variação da abertura: ocupa a sobra e sangra pela borda de baixo */
.moldura--sangra {
  flex: 1 1 0;
  min-height: 180px;          /* nunca some em janela muito baixa */
  border-bottom: none;        /* o aparelho continua para fora da tela */
  border-radius: var(--raio-app) var(--raio-app) 0 0;
}

.moldura--sangra .moldura__imagem,
.moldura--sangra .moldura__vazia {
  border-radius: var(--raio-tela) var(--raio-tela) 0 0;
}

/* variação do lembrete: aparelho inteiro, elástico entre 220 e 400px
   (acima disso sobra papel de parede vazio embaixo da notificação) */
.moldura--cena {
  flex: 1 1 0;
  min-height: 220px;
  max-height: 400px;
}

/* esmaece o corte de baixo até o fundo da tela, para não parecer erro de recorte */
.moldura__desvanecimento {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--desvanecimento);
  background: linear-gradient(to bottom, transparent, var(--fundo));
  pointer-events: none;
}

.moldura__imagem {
  object-fit: cover;
  object-position: top center;
}

/* usada quando a tela não tem imagem definida em conteudo.js */
.moldura__vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--pilula-inativa);
  color: var(--texto-secundario);
  font-size: var(--fs-corpo-pequeno);
}

.selos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espaco-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.selo {
  padding: var(--espaco-6) var(--espaco-10);
  border-radius: var(--raio-pilula);
  background: var(--pilula-inativa);
  color: var(--texto-secundario);
  font-size: var(--fs-selo);
  font-weight: var(--peso-rotulo);
  white-space: nowrap;
}

/* --------------------------- opções --------------------------- */

.opcoes {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-cards);
  margin: 0;
  padding: 0;
}

/* só quando a tela pede "colunas: 2" em conteudo.js */
.opcoes--duas-colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.opcoes--duas-colunas .cartao {
  min-height: 72px;
  justify-content: center;
  text-align: center;
}

.opcoes--duas-colunas .cartao__texto { flex: 0 1 auto; }

.cartao {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--espaco-12);
  width: 100%;
  padding: var(--padding-card);
  border: 2px solid var(--card);
  border-radius: var(--raio-medio);
  background: var(--card);
  box-shadow: var(--sombra-card);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--fs-titulo-card);
  font-weight: var(--peso-titulo-card);
  line-height: var(--lh-corpo);
  text-align: left;
  cursor: pointer;
}

.cartao--marcado {
  background: var(--azul-suave);
  border-color: var(--azul);
  animation: mola var(--mola) ease;
}

@keyframes mola {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* anel que nasce nas bordas do cartão e floresce para fora.
   É um pseudoelemento posicionado: não ocupa espaço nem empurra nada. */
.cartao--marcado::after {
  content: '';
  position: absolute;
  pointer-events: none;
  top: -2px; right: -2px; bottom: -2px; left: -2px;
  border: 2px solid var(--azul);
  border-radius: calc(var(--raio-medio) + 2px);
  opacity: 0.5;
  animation: anel var(--anel) ease-out forwards;
}

@keyframes anel {
  from {
    top: -2px; right: -2px; bottom: -2px; left: -2px;
    border-radius: calc(var(--raio-medio) + 2px);
    opacity: 0.5;
  }
  to {
    top: -14px; right: -14px; bottom: -14px; left: -14px;
    border-radius: calc(var(--raio-medio) + 14px);
    opacity: 0;
  }
}

.cartao__texto { flex: 1 1 auto; }

/* marca de "certo" da escolha múltipla */
.cartao__marca {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 2px solid var(--azul-claro);
  border-radius: var(--raio-pilula);
  background: var(--card);
  color: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-corpo-pequeno);
  line-height: 1;
}

.cartao--marcado .cartao__marca {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--texto-invertido);
}

/* ------------------------ tela de horário --------------------- */

.horarios {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espaco-8);
}

.pilula {
  padding: var(--espaco-12) var(--espaco-4);
  border: 2px solid var(--card);
  border-radius: var(--raio-pilula);
  background: var(--card);
  box-shadow: var(--sombra-card);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--fs-corpo);
  font-weight: var(--peso-botao);
  text-align: center;
  cursor: pointer;
}

.pilula--outro { grid-column: 1 / -1; }

.pilula--marcada {
  background: var(--azul-suave);
  border-color: var(--azul);
  animation: mola var(--mola) ease;
}

.campo-horario {
  display: none;
  width: 100%;
  margin-top: var(--espaco-12);
  padding: var(--espaco-12) var(--espaco-16);
  border: 1px solid var(--divisoria);
  border-radius: var(--raio-medio);
  background: var(--card);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--fs-botao);
}

.campo-horario--visivel { display: block; }

/* --------------------------- reação --------------------------- */

/* Sem fundo e sem sombra, para não parecer mais uma opção:
   só uma barrinha azul à esquerda. */
.reacao {
  min-height: 40px;
  margin: var(--espaco-16) 0 0;
  padding-left: var(--espaco-12);
  border-left: 3px solid var(--azul);
  color: var(--texto);
  font-size: var(--fs-reacao);
  font-weight: var(--peso-corpo);
  line-height: var(--lh-corpo);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}

.reacao--visivel {
  visibility: visible;
  animation: sobe var(--transicao) ease forwards;
}

@keyframes sobe {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================== bloco 2 — a demonstração ==================== */

/* etiqueta do canto superior direito: nada aqui é salvo de verdade.
   É um sussurro — só texto, sem fundo e sem pílula, para não competir
   com o título nem empurrar o conteúdo. */
.etiqueta {
  display: block;
  width: fit-content;
  align-self: flex-end;
  margin: 0 0 var(--espaco-4) auto;
  color: var(--texto-secundario);
  font-size: var(--fs-miudo);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
}

/* ---------------------- tela de espera -------------------------- */

/* EXCEÇÃO, e só para o tipo 'processando': esta é a única tela do funil
   que centraliza na vertical. Ela não tem título nem subtítulo — só o
   círculo e a frase —, então grudar no topo deixaria um vazio enorme
   embaixo. NÃO generalize isto para outras telas: em todas as outras o
   conteúdo começa no topo e a sobra fica embaixo (ver .tela). */
.tela--espera {
  display: flex;
  flex-direction: column;
  align-items: center;        /* centraliza na horizontal */
  justify-content: center;    /* e, só aqui, também na vertical */
  height: 100%;
}

.anel-caixa {
  position: relative;
  width: 120px;
  height: 120px;
}

.anel {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);   /* começa a encher no topo */
}

.anel__trilho,
.anel__linha {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
}

.anel__trilho { stroke: var(--pilula-inativa); }
.anel__linha { stroke: var(--azul); }

.anel__numero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-numero-grande);
  font-weight: var(--peso-numero-grande);
  color: var(--texto);
}

/* duas linhas reservadas: a frase troca sem empurrar nada */
.frases {
  position: relative;
  width: 100%;
  height: 40px;
  margin-top: var(--espaco-24);
}

.frases__texto {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: var(--texto-secundario);
  opacity: 0;
  transition: opacity var(--transicao-frase) ease;
}

.frases__texto--visivel { opacity: 1; }

/* ------------------------- calendário --------------------------- */

.calendario {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--espaco-4);
}

.calendario__inicial {
  padding-bottom: var(--espaco-4);
  text-align: center;
  font-size: var(--fs-selo);
  color: var(--texto-secundario);
}

.calendario__dia {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: var(--raio-pequeno);
  background: var(--card);
  color: var(--texto-secundario);
  font-size: var(--fs-corpo-pequeno);
}

.calendario__dia--aplicacao {
  background: var(--azul);
  color: var(--texto-invertido);
  font-weight: var(--peso-destaque);
}

.calendario__dia--hoje { border-color: var(--texto); }

.resumo {
  margin: var(--espaco-20) 0 0;
  font-size: var(--fs-corpo);
  font-weight: var(--peso-destaque);
  color: var(--texto);
}

/* Sem legenda de compostos: a pessoa respondeu uma frequência só,
   e colorir dias por composto afirmaria algo que ela nunca disse. */

/* -------------------------- lembrete ---------------------------- */

.tela--lembrete {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* a tela de bloqueio, desenhada em CSS — sem imagem nenhuma */
.bloqueio {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: var(--espaco-24) var(--espaco-12);
  border-radius: var(--raio-tela);
  /* gradiente diagonal + um clarão radial por cima, para o papel de
     parede ter profundidade e não ler como retângulo azul chapado */
  background:
    radial-gradient(circle at 30% 20%, var(--brilho) 0%, transparent 70%),
    linear-gradient(135deg, var(--azul), var(--azul-gradiente));
}

.bloqueio__hora {
  font-size: var(--fs-hora);
  font-weight: var(--peso-hora);
  line-height: 1.1;
  color: var(--texto-invertido);
}

.bloqueio__data {
  margin-top: var(--espaco-4);
  font-size: var(--fs-corpo-pequeno);
  color: var(--texto-invertido-suave);
}

.notificacao {
  width: 100%;
  margin-top: var(--espaco-24);
  padding: var(--espaco-12);
  border-radius: var(--raio-medio);
  background: var(--notificacao-fundo);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: var(--sombra-card);
  animation: caiNotificacao var(--queda-notificacao) ease-out var(--espera-notificacao) backwards;
}

@keyframes caiNotificacao {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.notificacao__topo {
  display: flex;
  align-items: center;
  gap: var(--espaco-6);
}

.notificacao__icone {
  width: 20px;
  height: 20px;
  border-radius: var(--espaco-6);
  background: var(--azul);
}

.notificacao__app {
  flex: 1 1 auto;
  font-size: var(--fs-miudo);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--texto-secundario);
}

.notificacao__quando {
  font-size: var(--fs-miudo);
  color: var(--texto-secundario);
}

.notificacao__titulo {
  margin: var(--espaco-8) 0 0;
  font-size: var(--fs-corpo);
  font-weight: var(--peso-destaque);
  color: var(--texto);
}

.notificacao__texto {
  margin: var(--espaco-4) 0 0;
  font-size: var(--fs-corpo-pequeno);
  color: var(--texto-secundario);
}

.argumento__forte {
  margin: var(--espaco-20) 0 0;
  font-size: var(--fs-corpo);
  font-weight: var(--peso-destaque);
  line-height: var(--lh-corpo);
  color: var(--texto);
}

.argumento {
  margin: var(--espaco-4) 0 0;
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: var(--texto-secundario);
}

/* ============ bloco 3 — o Índice de Controle =================== */

/* rótulo de seção acima do título (12px, maiúsculas) */
.rotulo-secao {
  margin: 0 0 var(--espaco-8);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--texto-secundario);
}

.indice-numero {
  margin: var(--espaco-24) 0 0;
  text-align: center;
  font-size: var(--fs-indice);
  font-weight: var(--peso-titulo);
  line-height: 1;
  color: var(--texto);
}

.indice-escala {
  margin: var(--espaco-4) 0 0;
  text-align: center;
  font-size: var(--fs-corpo);
  color: var(--texto-secundario);
}

/* ---------------------------- medidor --------------------------- */

.medidor {
  display: flex;
  align-items: center;
  gap: var(--espaco-12);
  margin-top: var(--espaco-20);
}

.medidor__trilho {
  flex: 1 1 auto;
  height: 10px;
  border-radius: var(--raio-pilula);
  background: var(--pilula-inativa);
  overflow: hidden;
}

.medidor__preenchimento {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--raio-pilula);
  background: var(--azul);
}

.medidor__faixa {
  flex: 0 0 auto;
  font-size: var(--fs-corpo-pequeno);
  font-weight: var(--peso-destaque);
}

.medidor--faixa-1 .medidor__preenchimento { background: var(--faixa-1); }
.medidor--faixa-1 .medidor__faixa { color: var(--faixa-1); }
.medidor--faixa-2 .medidor__preenchimento { background: var(--faixa-2); }
.medidor--faixa-2 .medidor__faixa { color: var(--faixa-2); }
.medidor--faixa-3 .medidor__preenchimento { background: var(--faixa-3); }
.medidor--faixa-3 .medidor__faixa { color: var(--faixa-3); }
.medidor--faixa-4 .medidor__preenchimento { background: var(--faixa-4); }
.medidor--faixa-4 .medidor__faixa { color: var(--faixa-4); }

/* ------------------------- a conta ------------------------------ */

.conta { margin-top: var(--espaco-24); }

.conta__linha {
  display: flex;
  align-items: center;
  gap: var(--espaco-12);
  padding: var(--espaco-12) 0;
  border-bottom: 1px solid var(--divisoria);
  animation: sobeLinha 260ms ease-out backwards;   /* atraso vem do motor, em cascata */
}

.conta__linha:last-child { border-bottom: none; }

.conta__lado {
  flex: 1 1 auto;
  min-width: 0;
}

.conta__pergunta {
  display: block;
  font-size: var(--fs-corpo);
  color: var(--texto);
}

.conta__resposta {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-corpo-pequeno);
  color: var(--texto-secundario);
}

.conta__pontos {
  flex: 0 0 auto;
  font-size: var(--fs-corpo);
  font-weight: var(--peso-destaque);
  color: var(--texto);
}

.conta__pontos--desconto { color: var(--vermelho); }

@keyframes sobeLinha {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* aviso obrigatório: o índice mede organização, não saúde */
.aviso {
  margin: var(--espaco-24) 0 0;
  padding: 14px;
  border-radius: var(--raio-medio);
  background: var(--alerta-fundo);
  color: var(--alerta-texto);
  font-size: var(--fs-corpo-pequeno);
  line-height: var(--lh-corpo);
}

/* ---------------- a projeção: o funil muda de pele --------------- */

/* o gradiente cobre tudo, inclusive cabeçalho e rodapé */
.app--invertido {
  background: linear-gradient(135deg, var(--azul), var(--azul-gradiente));
}

.app--invertido .cabecalho,
.app--invertido .rodape {
  background: transparent;
  border-top-color: transparent;
}

/* a barra some, mas o espaço dela fica: o cabeçalho não pode pular */
.app--invertido .progresso { visibility: hidden; }

.tela--projecao .titulo,
.tela--projecao .indice-numero { color: var(--texto-invertido); }

.tela--projecao .medidor__trilho { background: var(--trilho-invertido); }
.tela--projecao .medidor__preenchimento { background: var(--texto-invertido); }

/* linha embaixo do número, na versão de quem já é organizada */
.projecao-comparacao {
  margin: var(--espaco-8) 0 0;
  text-align: center;
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: var(--texto-invertido-forte);
}

.ganhos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-12);
  margin-top: var(--espaco-24);
}

.ganhos__titulo {
  margin: 0;
  font-size: var(--fs-corpo);
  font-weight: var(--peso-destaque);
  color: var(--texto-invertido);
}

.ganho {
  display: flex;
  align-items: baseline;
  gap: var(--espaco-12);
  animation: sobeLinha 260ms ease-out backwards;   /* atraso vem do motor, em cascata */
}

.ganho__valor {
  flex: 0 0 auto;
  min-width: 44px;              /* alinha a coluna dos "+20" */
  font-size: var(--fs-corpo);
  font-weight: var(--peso-titulo-card);
  color: var(--texto-invertido);
}

/* na versão de quem já é organizada são ✓, não "+20": sem coluna larga,
   o símbolo fica a 12px do texto (o gap da linha) */
.ganhos--marcas .ganho__valor { min-width: 0; }

.ganho__texto {
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: var(--texto-invertido-forte);
}

.remate {
  margin-top: var(--espaco-24);
  padding: var(--espaco-16);
  border-radius: var(--raio-medio);
  background: var(--caixa-invertida);
  color: var(--texto-invertido);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
}

.remate__forte {
  display: block;
  margin-bottom: var(--espaco-4);
  font-weight: var(--peso-titulo-card);
}

.remate__texto { display: block; }

/* ==================== a tela do custo ========================== */

.grafico {
  display: flex;
  align-items: flex-end;        /* as duas barras alinhadas pela base */
  gap: var(--espaco-16);
  margin-top: var(--espaco-24);
}

.barra-custo {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.barra-custo__valor {
  margin-bottom: var(--espaco-8);
  font-size: var(--fs-corpo-pequeno);
  font-weight: var(--peso-destaque);
  color: var(--texto);
}

/* a área do gráfico: a barra mais alta ocupa 100% dela */
.barra-custo__coluna {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: var(--altura-grafico);
}

.barra-custo__preenchimento {
  display: block;
  width: 100%;
  height: 0;
  min-height: var(--altura-minima-barra);   /* a barra do preço nunca some */
  border-radius: var(--raio-medio) var(--raio-medio) 0 0;
  transition: height var(--crescimento-das-barras) ease-out;
}

.barra-custo__preenchimento--gasto {
  background: linear-gradient(180deg, var(--azul), var(--azul-gradiente));
}

.barra-custo__preenchimento--preco { background: var(--desabilitado); }

.barra-custo__rotulo {
  margin-top: var(--espaco-8);
  font-size: var(--fs-corpo-pequeno);
  color: var(--texto-secundario);
}

.nota-do-preco {
  margin: var(--espaco-12) 0 0;
  text-align: center;
  font-size: var(--fs-corpo-pequeno);
  color: var(--texto-secundario);
}

/* as duas respostas dela, devolvidas */
.cartao-custo {
  margin-top: var(--espaco-24);
  padding: var(--padding-card);
  border-radius: var(--raio-card);
  background: var(--card);
  box-shadow: var(--sombra-card);
}

.cartao-custo__frase {
  margin: 0;
  font-size: var(--fs-frase);
  font-weight: var(--peso-titulo-card);
  line-height: var(--lh-frase);
  color: var(--texto);
}

.cartao-custo__nota {
  margin: var(--espaco-8) 0 0;
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: var(--texto-secundario);
}

/* ============ telas institucionais e a oferta =================== */

.lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-cards);
  margin-top: var(--espaco-24);
}

/* os seis benefícios da oferta: mais juntos, para os planos subirem */
.lista--compacta { gap: var(--espaco-8); }

.lista__item {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-12);
}

.lista__marca {
  flex: 0 0 auto;
  font-size: var(--fs-marcador);
  line-height: var(--lh-corpo);
}

.lista--positivo .lista__marca { color: var(--azul); }
.lista--neutro .lista__marca { color: var(--texto-secundario); }

.lista__texto {
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: var(--texto);
}

/* as garantias: uma linha só, colada nos planos — em 390x844 ela precisa
   caber sem rolar, junto do preço */
.garantias {
  margin: var(--espaco-8) 0 0;
  text-align: center;
  font-size: var(--fs-garantia);
  line-height: var(--lh-corpo);
  color: var(--texto-secundario);
}

/* o ✓ nunca se separa do texto dele na quebra de linha */
.garantias__item { white-space: nowrap; }

.garantias__marca {
  margin-right: var(--espaco-4);
  color: var(--sucesso);
}

.garantias__separador {
  margin: 0 var(--espaco-6);
  color: var(--desabilitado);
}

/* cartão de destaque das telas institucionais */
.destaque {
  margin-top: var(--espaco-24);
  padding: var(--padding-card);
  border-radius: var(--raio-card);
  background: var(--azul-suave);
}

.destaque__forte {
  margin: 0;
  font-size: var(--fs-frase);
  font-weight: var(--peso-titulo-card);
  line-height: var(--lh-frase);
  color: var(--texto);
}

.destaque__texto {
  margin: var(--espaco-8) 0 0;
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: var(--texto-suave);
}

/* --------------------------- os planos -------------------------- */

.planos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espaco-cards);
  margin-top: var(--espaco-32);   /* espaço para o selo, que sobe do cartão */
}

/* reaproveita .cartao (molinha, anel, borda de marcado) em coluna,
   mais compacto: o preço e o selo é que precisam do destaque */
.plano {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--padding-plano);
  text-align: left;
}

.plano__selo {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px var(--espaco-8);
  border-radius: var(--raio-pilula);
  background: var(--azul);
  color: var(--texto-invertido);
  font-size: var(--fs-miudo);
  font-weight: var(--peso-titulo-card);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  white-space: nowrap;
}

.plano__rotulo {
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--texto-secundario);
}

.plano__preco {
  font-size: var(--fs-numero-grande);
  font-weight: var(--peso-titulo);
  line-height: 1.1;
  color: var(--texto);
}

.plano__detalhe {
  font-size: var(--fs-corpo-pequeno);
  font-weight: var(--peso-corpo);
  line-height: var(--lh-corpo);
  color: var(--texto-secundario);
}

.plano__antes {
  font-size: var(--fs-corpo-pequeno);
  font-weight: var(--peso-corpo);
  color: var(--texto-secundario);
  text-decoration: line-through;
}

/* ============================ rodapé ========================== */

.rodape {
  flex: 0 0 auto;
  padding: var(--espaco-12) var(--margem-tela) var(--espaco-20);
  background: var(--fundo);
  border-top: 1px solid var(--divisoria);
}

/* nas telas de escolha única não há rodapé: elas avançam sozinhas */
.rodape--oculto { display: none; }

.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-8);
  width: 100%;
  height: 52px;
  border: none;
  border-radius: var(--raio-pilula);
  background: var(--desabilitado);
  color: var(--texto-invertido);
  font-family: var(--fonte);
  font-size: var(--fs-botao);
  font-weight: var(--peso-botao);
  cursor: not-allowed;
  transition: background var(--transicao) ease;
}

.botao--ativo {
  background: linear-gradient(90deg, var(--azul), var(--azul-gradiente));
  cursor: pointer;
}

/* botão invertido, sobre o fundo azul da projeção */
.botao--invertido,
.botao--invertido.botao--ativo {
  background: var(--card);
  color: var(--azul);
}

.botao--invertido .botao__marca { color: var(--azul); }

/* confirmação: o ✓ branco aparece à esquerda, o texto continua legível */
.botao__marca {
  display: none;
  color: var(--texto-invertido);
  font-weight: var(--peso-titulo-card);
}

.botao--confirmado .botao__marca { display: block; }

.nota-rodape {
  margin: var(--espaco-12) 0 0;
  text-align: center;
  font-size: var(--fs-corpo-pequeno);
  color: var(--texto-secundario);
}

.nota-rodape:empty { display: none; }

/* o texto legal, embaixo do botão da oferta */
.nota-rodape--legal {
  font-size: var(--fs-legal);
  line-height: var(--lh-legal);
}

.texto-legal__link {
  color: var(--azul);
  text-decoration: underline;
}

/* ===================== transição entre telas =================== */

.sai-esquerda   { animation: saiEsquerda    var(--meia-transicao) ease forwards; }
.sai-direita    { animation: saiDireita     var(--meia-transicao) ease forwards; }
.entra-direita  { animation: entraDireita   var(--meia-transicao) ease backwards; }
.entra-esquerda { animation: entraEsquerda  var(--meia-transicao) ease backwards; }

@keyframes saiEsquerda   { to   { opacity: 0; transform: translateX(-28px); } }
@keyframes saiDireita    { to   { opacity: 0; transform: translateX(28px); } }
@keyframes entraDireita  { from { opacity: 0; transform: translateX(28px); } }
@keyframes entraEsquerda { from { opacity: 0; transform: translateX(-28px); } }

/* ============ quem pediu menos animação, recebe menos =========== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reacao--visivel { opacity: 1; transform: none; }
  .cartao--marcado::after { display: none; }   /* sem anel florescendo */
}