/* Landing pages dos canais. Cor do nicho em --cor (vem do .env, a mesma da arte). */
@font-face {
  font-family: "Poppins";
  font-weight: 600;
  font-display: swap;
  src: url("fontes/Poppins-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-weight: 700;
  font-display: swap;
  src: url("fontes/Poppins-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Marcas";
  font-display: block;
  src: url("fontes/fa-brands-400.ttf") format("truetype");
}

:root {
  --fundo: #f4f6f8;
  --cartao: #ffffff;
  --texto: #1d2329;
  --suave: #5b6670;
  --borda: #e3e8ed;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  line-height: 1.5;
  padding: 24px 16px 40px;
}

.cartao {
  max-width: 460px;
  margin: 0 auto;
  background: var(--cartao);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20, 30, 40, 0.08);
}

.topo {
  background: var(--cor);
  color: var(--cor-texto);
  text-align: center;
  padding: 36px 24px 28px;
}

.avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #ffffff;
  display: grid;
  place-items: center;
  font-size: 48px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.avatar img { width: 100%; height: 100%; object-fit: contain; }

h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}

.frase { margin: 10px 0 0; font-size: 0.98rem; opacity: 0.92; }

.botoes { display: grid; gap: 12px; padding: 24px; }

.botao {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-radius: 14px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.02rem;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.botao:hover, .botao:focus-visible { transform: translateY(-1px); filter: brightness(1.06); }
.botao:focus-visible { outline: 3px solid var(--texto); outline-offset: 2px; }

.botao .icone { font-family: "Marcas"; font-weight: 400; font-size: 1.45rem; width: 1.6rem; text-align: center; }
.botao .seta { margin-left: auto; opacity: 0.8; }

/* Cores das redes, escurecidas o bastante pra texto branco ser legível. */
.botao.telegram { background: #1c8cc4; }
.botao.whatsapp { background: #128c7e; }
.botao.grupo { background: #0b6e63; }
.botao.instagram { background: linear-gradient(45deg, #c13584, #833ab4); }
.icone.telegram::before { content: "\f2c6"; }
.icone.whatsapp::before, .icone.grupo::before { content: "\f232"; }
.icone.instagram::before { content: "\f16d"; }

.em-breve { margin: 0; padding: 24px; text-align: center; color: var(--suave); }

.como { padding: 0 24px 8px; }
.como h2 { font-size: 1.05rem; margin: 0 0 8px; }
.como ul { margin: 0; padding-left: 1.2rem; color: var(--suave); font-size: 0.95rem; }
.como li { margin: 4px 0; }

/* Página inicial: um cartão por nicho. */
.nichos { display: grid; gap: 12px; padding: 24px; }
.nicho {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--fundo);
  border-left: 8px solid var(--cor-nicho);
  color: var(--texto);
  text-decoration: none;
}
.nicho:hover, .nicho:focus-visible { filter: brightness(0.97); }
.nicho .emoji { font-size: 1.8rem; }
.nicho strong { display: block; font-size: 1.05rem; }
.nicho span.desc { display: block; color: var(--suave); font-size: 0.88rem; font-weight: 600; }

.rodape { border-top: 1px solid var(--borda); padding: 18px 24px 24px; text-align: center; }
.rodape .outros { margin: 0 0 12px; font-size: 0.92rem; }
.rodape .outros a { color: var(--texto); }
.aviso { margin: 0; color: var(--suave); font-size: 0.78rem; line-height: 1.45; }