/* ==========================================================================
   components.css
   Marca, botoes, cards, pills, icones, listas, prova social, redes.
   Sistema_de_Estilos.md:23 "components.css | Botoes, cards, tabelas, forms..."
   ========================================================================== */

/* --- Marca --------------------------------------------------------------
   LOGOTIPO OFICIAL. Arquivo: static/img/dataevo-horizontal-escuro.png
   Assinatura horizontal, versao para fundo escuro ("Data" e "Evo" em branco,
   raio em gradiente laranja). Recebido do Joviano em 06/08/2026.
   Substituiu a reconstrucao tipografica anterior. Divergencia D1 RESOLVIDA.

   06_Identidade_Visual_DataEvo.md:24 "Fundos coloridos de terceiros: garantir
   contraste (versoes clara/escura conforme fundo)". O fundo aqui e #0d0f12,
   entao a versao correta e a de fundo escuro.

   06_Identidade_Visual_DataEvo.md:28 lista como uso incorreto: deformar,
   distorcer, aplicar sombra ou efeito, contornar, girar, alterar cores.
   Por isso: nada de filter, nada de transform, nada de box-shadow aqui, e a
   proporcao vem de `width: auto` a partir da altura.
   ------------------------------------------------------------------------- */

.marca {
  display: inline-flex;
  align-items: center;
  /* 06_Identidade_Visual_DataEvo.md:22 "Area de protecao: largura da letra A
     ao redor de qualquer versao".
     Medido no proprio arquivo: a letra tem 59px de largura para 112px de
     altura de conteudo, ou seja 0,53 vez a altura. Com a marca renderizada a
     26px, a protecao da 13px. */
  padding: 13px;
  margin: -13px;   /* a protecao nao pode empurrar o layout, so reservar espaco */
}

.marca img {
  height: 26px;
  width: auto;     /* nunca fixar os dois: fixar os dois deforma */
  display: block;
}

/* 06_Identidade_Visual_DataEvo.md:21 "digital 50px sem [tagline]".
   A 26px de altura a marca fica com 126px de largura, bem acima do minimo. */

.marca-lg {
  padding: 17px;
  margin: -17px;
}

.marca-lg img {
  height: 34px;
}

/* --- Icones -------------------------------------------------------------
   Icones_Phosphor.md:101-112 "Tamanho e cor via CSS, nunca inline"
   ------------------------------------------------------------------------- */

.icon {
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  vertical-align: middle;
}

.icon-sm { font-size: .9rem; }
.icon-md { font-size: 1.25rem; }
.icon-lg { font-size: 1.75rem; }
.icon-xl { font-size: 2.5rem; }

.icon-accent { color: var(--accent); }
.icon-success { color: var(--success); }
.icon-muted { color: var(--text-dim); }

/* --- Botoes -------------------------------------------------------------
   Sistema_de_Estilos.md:59-60 (.btn 500/13px, .btn-primary 600/13px, Inter)
   Responsividade_Sempre.md:138-145 (min 44x44px no mobile)
   .btn-lg e extensao declarada para CTA de pagina publica: mantem familia
   Inter e os pesos da nota, so aumenta o tamanho. Divergencia D4.
   ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transicao);
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: var(--preto-quente);
  font-weight: 600;
  box-shadow: var(--sombra-sm);
}

.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--sombra);
  transform: translateY(-1px);
}

.btn-ghost {
  border-color: var(--borda-forte);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-link {
  padding: 8px 0;
  color: var(--text-dim);
}

.btn-link:hover {
  color: var(--accent);
}

.btn-lg {
  min-height: 52px;
  padding: 14px 26px;
  font-size: var(--fs-lg);
  border-radius: var(--raio);
}

.btn-zap {
  background: var(--zap);
  color: var(--branco);
  font-weight: 600;
}

/* O hover ESCURECE em vez de clarear. Clarear derrubaria o contraste do texto
   branco, que e justamente o que o token foi escolhido para garantir. */
.btn-zap:hover {
  filter: brightness(0.9);
  transform: translateY(-1px);
}

@media (max-width: 720px) {
  .btn {
    min-height: 44px;
    padding: 11px 16px;
  }

  .btn-lg {
    min-height: 54px;
    width: 100%;
    /* O `white-space: nowrap` do .btn e otimo em botao curto de topbar, mas em
       botao grande de mobile ele forca o elemento a ficar MAIS LARGO que o
       container para nao quebrar a frase. Medido em 360px: os botoes do hero
       saiam com 333px dentro de um container de 328px, e desalinhavam com todo
       o resto da pagina. Aqui a frase pode quebrar. */
    white-space: normal;
    text-align: center;
  }

  /* Mesmo motivo do .btn-lg: o link de texto longo do rodape da secao de
     caminhos saia com 344px num container de 328px por causa do nowrap. */
  .btn-link {
    white-space: normal;
    text-align: center;
  }

  /* A marca tambem e link, entao tambem e alvo de toque.
     Medido no navegador em 360px: 18px de altura, abaixo do minimo.
     Responsividade_Sempre.md:138 "44x44px minimo". */
  .marca {
    min-height: 44px;
  }
}

/* --- Pill / eyebrow ------------------------------------------------------ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-full);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pill-neutro {
  background: var(--surface);
  border-color: var(--borda);
  color: var(--text-dim);
}


/* --- Card ---------------------------------------------------------------
   Padrao_Box_Card.md:17-27 (estrutura base)
   Padrao_Box_Card.md:44 "Nao use valores soltos. Sempre token."
   Padrao_Box_Card.md:102 hover muda so border-color, shadow e translate
   ------------------------------------------------------------------------- */

.cd {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--sp-4);
  box-shadow: var(--sombra-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.cd-lg {
  padding: var(--sp-5);
}

.cd-titulo {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.cd-texto {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin: 0;
}

.cd-icone {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-sm);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: var(--neu-fundo);
}

.cd-neu {
  background: var(--bg-elev);
  box-shadow: var(--neu);
}

.cd-clicavel {
  cursor: pointer;
  transition: var(--transicao);
}

.cd-clicavel:hover {
  border-color: var(--accent);
  box-shadow: var(--sombra);
  transform: translateY(-2px);
}

/* --- Bloco de destaque (painel lateral do hero) -------------------------- */

.bloco-destaque {
  background: var(--bg-elev);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  padding: var(--sp-5);
  box-shadow: var(--neu);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.bloco-destaque .cd {
  background: var(--surface);
  box-shadow: none;
}

/* --- Numeros do acervo --------------------------------------------------- */

.num {
  background: var(--bg-elev);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--sp-4);
  box-shadow: var(--neu-fundo);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  text-align: center;
}

/* Sistema_de_Estilos.md:45 valor grande usa Sora 700 */
.num-valor {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-2xl);
  letter-spacing: -.02em;
  color: var(--accent);
  line-height: 1.1;
}

/* Sistema_de_Estilos.md:56 rotulo categorial: uppercase, letter-spacing */
.num-rotulo {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-dim);
}

/* --- Antes / Agora ------------------------------------------------------- */

.ao-col {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
}

.ao-antes {
  background: var(--surface);
}

.ao-agora {
  background: linear-gradient(160deg, rgba(255, 117, 0, .10), rgba(255, 117, 0, .02));
  border-color: rgba(255, 117, 0, .32);
  box-shadow: var(--neu);
}

.ao-rotulo {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-dim);
}

.ao-agora .ao-rotulo {
  color: var(--accent);
}

.ao-item {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-base);
}

.ao-antes .ao-item {
  color: var(--text-dim);
}

/* --- Prova social -------------------------------------------------------- */

.prova-valor {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: -.02em;
  color: var(--accent);
  line-height: 1.1;
}

.prova-nome {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}

.aviso {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--warning);
  border-radius: var(--raio-sm);
  background: var(--surface);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* --- Os dois caminhos ----------------------------------------------------
   Substituiu o CTA unico. Decisao do Joviano em 06/08/2026: quem nao tem
   acesso pode ir para o DataEvo Full (o pacote que ele tentou abrir) ou para
   a Fabrica de Apps (solucoes com IA).
   Continua sendo card por Padrao_Box_Card.md: mesmo padding, raio, borda e
   altura igual entre irmaos. So muda o que e proprio do bloco.
   ------------------------------------------------------------------------- */

.caminho {
  /* Padrao_Box_Card.md:48-53 lista os paddings permitidos: 12px card pequeno,
     16px medio, 20 ou 24px card grande. Estava com 32px (var(--sp-6)), que nao
     existe na tabela. Corrigido para 24px. */
  padding: var(--sp-5);
  gap: var(--sp-4);
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(255, 255, 255, .035), transparent 70%),
    var(--bg-elev);
  box-shadow: var(--neu);
}

/* O DataEvo Full ganha a borda laranja porque foi o pacote que barrou a
   pessoa. Ele e o caminho esperado, o outro e a alternativa. */
.caminho-destaque {
  border-color: rgba(255, 117, 0, .38);
  background:
    radial-gradient(ellipse 120% 65% at 50% 0%, rgba(255, 117, 0, .13), transparent 70%),
    var(--bg-elev);
}

.caminho-tag {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-dim);
}

.caminho-destaque .caminho-tag {
  color: var(--accent);
}

.caminho .cd-titulo {
  font-size: var(--fs-2xl);
  font-family: var(--font-titulo);
  font-weight: 700;
  letter-spacing: -.02em;
}

/* Botao colado no pe do card, para os dois ficarem na mesma linha mesmo com
   textos de tamanhos diferentes. */
.caminho .btn {
  margin-top: auto;
}

.texto-centro {
  text-align: center;
}

/* --- Redes sociais ------------------------------------------------------- */

.redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.rede {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--surface);
  color: var(--text-dim);
  transition: var(--transicao);
}

.rede:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

@media (max-width: 720px) {
  .rede {
    width: 44px;
    height: 44px;
  }
}

/* --- Variantes para a secao clara ----------------------------------------
   Mesmos componentes, superficie invertida. Nada de classe nova de card:
   Padrao_Box_Card.md continua regendo padding, raio, borda e altura.
   ------------------------------------------------------------------------- */

.secao-clara .cd {
  background: var(--claro-superficie);
  border-color: var(--claro-borda);
  box-shadow: var(--neu-claro);
}

.secao-clara .cd-titulo {
  color: var(--claro-texto);
}

.secao-clara .cd-icone {
  background: var(--accent-soft);
  color: var(--accent-queimado);
  box-shadow: none;
}

.secao-clara .cd-clicavel:hover {
  border-color: var(--accent-queimado);
}

/* A pill tem 12px peso 600, entao NAO conta como texto grande e precisa dos
   4.5:1 cheios. Medido no navegador: o laranja queimado #D45D00 sobre branco
   da 3.91, reprovado. O laranja principal #FF7500 e pior ainda.
   06_Identidade_Visual_DataEvo.md:42 avisa: "Matriz de combinacoes aprovadas
   (qual cor sobre qual fundo, claro e escuro) esta no manual: consultar antes
   de criar peca, NAO INVENTAR CONTRASTE". O manual Bravemark nao esta aqui,
   entao nao invento um laranja novo: uso o preto quente #2D2926, que ja e cor
   oficial da paleta (:38), sobre o fundo laranja suave. Duas cores da marca,
   contraste resolvido, nada inventado. */
.secao-clara .pill {
  background: var(--accent-soft);
  border-color: rgba(212, 93, 0, .35);
  color: var(--claro-texto);
}

.secao-clara .pill-neutro {
  background: var(--claro-superficie);
  border-color: var(--claro-borda);
  color: var(--claro-texto-dim);
}

.secao-clara .btn-ghost {
  border-color: #B9B5B0;
  color: var(--claro-texto);
}

.secao-clara .btn-ghost:hover {
  border-color: var(--accent-queimado);
  color: var(--accent-queimado);
}

.secao-clara .btn-link {
  color: var(--claro-texto-dim);
}

.secao-clara .btn-link:hover {
  color: var(--accent-queimado);
}

.secao-clara .prova-valor,
.secao-clara .num-valor {
  color: var(--accent-queimado);
}

.secao-clara .num {
  background: var(--claro-superficie);
  border-color: var(--claro-borda);
  box-shadow: var(--neu-claro);
}

.secao-clara .num-rotulo,
.secao-clara .ao-rotulo {
  color: var(--claro-texto-dim);
}

.secao-clara .prova-nome {
  color: var(--claro-texto);
}

.secao-clara .aviso {
  background: var(--claro-superficie);
  border-color: var(--claro-borda);
  border-left-color: var(--accent-queimado);
  color: var(--claro-texto-dim);
}


/* --- Botao flutuante de WhatsApp -----------------------------------------
   Fixo no canto inferior direito, em toda a pagina.

   Camada: `var(--z-sticky)`, a mesma da topbar, e nao um numero novo.
   Padrao_Elevacao_Zindex.md:12 "Nenhum z-index no olho. Toda camada usa um
   token nomeado de uma escala fixa". Nao criei token proprio de flutuante
   porque este botao e exatamente o que o `--z-sticky` ja descreve: elemento
   fixo persistente. Se um dia entrar modal nesta pagina, ele vai para
   `--z-modal` (500) e cobre este botao, que e o comportamento certo.

   Cor: verde `--zap` com icone BRANCO, igual ao botao de suporte. O verde vivo
   do WhatsApp com branco reprova em contraste (1.98:1), entao o token usa um
   verde mais fechado que entrega 5.25:1. Ver o comentario em tokens.css.
   ------------------------------------------------------------------------- */

.zap-flutuante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--z-sticky);

  /* 56px e o tamanho classico de botao flutuante, e ja passa com folga dos
     44x44 que Responsividade_Sempre.md:138 exige no mobile. */
  width: 56px;
  height: 56px;
  border-radius: var(--raio-full);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--zap);
  color: var(--branco);
  box-shadow: var(--sombra-md);
  transition: var(--transicao);
}

.zap-flutuante:hover {
  filter: brightness(0.9);
  transform: translateY(-2px);
  box-shadow: var(--sombra-lg);
}

.zap-flutuante .icon-lg {
  /* Icones_Phosphor.md:131 "Tamanho e cor via CSS, nunca inline". Usa a classe
     do catalogo da nota (:106), nao um tamanho avulso. */
  line-height: 1;
}

/* --- Rotulo que encurta no mobile ----------------------------------------
   No celular o botao "Voltar pra plataforma" tem 191px e sobra folga de 3px
   ate a marca. 06_Identidade_Visual_DataEvo.md:22 exige area de protecao do
   tamanho da letra ao redor do logo, que aqui da 13px. Com 3px o botao invade.
   Encurtando o rotulo, a folga vai pra casa dos 70px.
   Medido no navegador em 360px antes e depois.
   ------------------------------------------------------------------------- */

.txt-curto { display: none; }

@media (max-width: 720px) {
  .txt-longo { display: none; }
  .txt-curto { display: inline; }
}

/* --- Utilitarios --------------------------------------------------------- */

.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }