/* Página pública (raiz). Separada de chat.css porque é o único lugar
   que alguém vê antes de ter conta — carregar o CSS do produto inteiro
   aqui seria peso sem uso. */
.site-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 20px 24px; max-width: 1040px; margin: 0 auto;
}
.site-logo { display: block; height: 40px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 18px; }
.site-nav a { color: #6b5a63; text-decoration: none; font-size: 14px; }
.site-nav a:hover { color: #a3406a; }
/* `.site-nav a` tem especificidade maior que `.btn-primary` sozinho — sem
   isto o botão do topo fica com texto escuro sobre fundo escuro. */
.site-nav a.btn-primary { color: #fff; }
.site-nav a.btn-primary:hover { color: #fff; }

.btn-primary {
    background: #a3406a; color: #fff; padding: 9px 18px; border-radius: 8px;
    text-decoration: none; font-size: 14px; display: inline-block;
}
.btn-primary:hover { background: #8d3159; color: #fff; }
.btn-lg { padding: 13px 28px; font-size: 16px; }
.btn-ghost {
    color: #a3406a; border: 1px solid #e3cdd8; background: #fff;
    padding: 12px 24px; border-radius: 8px; text-decoration: none; font-size: 16px;
    display: inline-block;
}
.btn-ghost:hover { background: #f5eaf0; }

.site-main { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

.hero { padding: 56px 0 48px; max-width: 720px; }
.hero h1 { font-size: 40px; line-height: 1.15; margin: 0 0 16px; color: #2a1f2d; }
.hero .lead { font-size: 18px; line-height: 1.55; color: #5b4c54; margin: 0 0 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { font-size: 13px; color: #8a7a82; margin: 18px 0 0; }

/* 4 cards: 2x2 no desktop. Com auto-fit cabiam 3 na primeira linha e
   sobrava um órfão na segunda, o que fica torto em qualquer largura. */
.features {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 20px; padding: 8px 0 40px;
}
/* Número ímpar de cards: o último ocupa a linha inteira, em vez de ficar
   um órfão com metade da largura vazia ao lado. */
.feature:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 700px) {
    .features { grid-template-columns: 1fr; }
    .feature:last-child:nth-child(odd) { grid-column: auto; }
}
.feature { background: #fff; border: 1px solid #f0e6ec; border-radius: 12px; padding: 22px 24px; }
.feature h3 { margin: 0 0 8px; font-size: 16px; color: #a3406a; }
.feature p { margin: 0; font-size: 14px; line-height: 1.55; color: #5b4c54; }

.transparencia { border-top: 1px solid #f0e6ec; padding: 28px 0 40px; max-width: 720px; }
.transparencia h2 { font-size: 17px; color: #a3406a; margin: 0 0 12px; }
.transparencia p { font-size: 14px; line-height: 1.6; color: #5b4c54; margin: 0 0 12px; }

.site-foot {
    border-top: 1px solid #f0e6ec; margin-top: 8px;
    padding: 24px; max-width: 1040px; margin-left: auto; margin-right: auto;
}
.site-foot p { font-size: 12px; line-height: 1.6; color: #8a7a82; margin: 0 0 8px; max-width: 720px; }
.foot-links a { color: #a3406a; text-decoration: none; }

@media (max-width: 600px) {
    /* O cabeçalho tem logo + dois links + botão; em telas estreitas isso
       não cabe numa linha e empurrava a página inteira pra fora. */
    .site-head { flex-wrap: wrap; gap: 10px; }
    .site-logo { height: 32px; }
    .site-nav { gap: 12px; font-size: 13px; }
    .doc h1 { font-size: 24px; }
    .hero { padding: 32px 0 32px; }
    .hero h1 { font-size: 30px; }
    .hero .lead { font-size: 16px; }
    .btn-lg, .btn-ghost { width: 100%; text-align: center; }
}


/* Documentos legais (termos, privacidade). Coluna estreita de propósito:
   texto jurídico corrido em linha larga é o que faz ninguém ler. */
.doc { max-width: 680px; padding: 8px 0 48px; }
.doc h1 { font-size: 30px; color: #2a1f2d; margin: 24px 0 6px; }
.doc h2 { font-size: 18px; color: #a3406a; margin: 34px 0 10px; }
.doc h3 { font-size: 15px; color: #4a3d44; margin: 20px 0 6px; }
.doc p, .doc li { font-size: 15px; line-height: 1.65; color: #4a3d44; }
.doc p { margin: 0 0 12px; }
.doc ul { margin: 0 0 14px; padding-left: 20px; }
.doc li { margin-bottom: 7px; }
.doc-meta { font-size: 13px; color: #999; margin-bottom: 20px; }