/* capa.css — a pagina de capa. Nao serve mais nada.
 *
 * Separado do styles.css de proposito: aquele veste privacidade.html e
 * termos.html, que continuam existindo. Mexer num nao quebra o outro.
 */

:root {
  --navy: #0f1b3d;
  --navy-fundo: #0a1229;
  --teal: #14b8a6;
  --claro: #e8edf7;
  --suave: #9aa9c4;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--navy-fundo);
  color: var(--claro);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 16px de respiro nas laterais, para nao colar na borda do celular */
  padding: 48px 16px;
  position: relative;
  overflow-x: hidden;
}

/* A malha de dados. Fica numa camada propria, atras de tudo, com a
 * opacidade baixa o bastante para o texto nao disputar com ela. */
.fundo {
  position: fixed;
  inset: 0;
  background: url("fundo.svg") center / cover no-repeat;
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}

/* Vinheta: escurece as bordas e empurra o olho para o centro. */
.fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 46%,
              rgba(10,18,41,0) 38%, rgba(10,18,41,.82) 100%);
}

.capa {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 44rem;
}

.marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 2.6rem;
}

.marca img {
  width: 58px;
  height: 58px;
  /* o simbolo e um quadrado navy; no fundo escuro ele some sem isto */
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 10px 34px rgba(0,0,0,.45);
  border-radius: 15px;
}

.marca span {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
}

.gancho {
  margin: 0;
  font-size: clamp(1.45rem, 4.4vw, 2.5rem);
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--claro);
  text-wrap: balance;
}

.gancho em {
  font-style: normal;
  color: var(--teal);
}

/* "em breve": um aviso de estado, nao um botao. Sem caixa, sem borda,
 * sem nada que convide ao clique -- a pagina inteira existe para nao ter
 * para onde clicar. */
.breve {
  margin: 2.8rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: .62rem;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--suave);
}

.ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(20,184,166,.16);
}

@media (prefers-reduced-motion: no-preference) {
  .ponto { animation: pulso 2.8s ease-in-out infinite; }
  @keyframes pulso {
    0%, 100% { box-shadow: 0 0 0 4px rgba(20,184,166,.16); }
    50%      { box-shadow: 0 0 0 9px rgba(20,184,166,.05); }
  }
}

@media (max-width: 520px) {
  .marca { gap: 12px; margin-bottom: 2rem; }
  .marca img { width: 46px; height: 46px; border-radius: 12px; }
  .marca span { font-size: 1.6rem; }
  .breve { margin-top: 2.2rem; font-size: .78rem; letter-spacing: .18em; }
}

/* Em tela clara o fundo continua escuro: a capa e escura por desenho,
 * nao por preferencia do sistema. Nada a adaptar. */

@media (prefers-reduced-motion: no-preference) {
  .capa { animation: surgir .9s ease-out both; }
  @keyframes surgir {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}