@charset "UTF-8";
/**
 * Componentes de estrutura da Tribo das Estrelas.
 *
 * Direcao confirmada pelo cliente: azul, paz espiritual. Nao e a energia
 * quente e saturada que o mercado usa no assunto -- e calma. Isso decide
 * tudo aqui: respiro largo, contraste baixo, movimento pequeno.
 *
 * As fotografias entram depois. Por isso os espacos de imagem sao um
 * componente de verdade, com proporcao fixa e aparencia deliberada quando
 * vazios. Buraco vazio que parece defeito e pior que ausencia assumida.
 *
 * ASCII puro nos comentarios, pelo motivo de sempre.
 */

/* ============================================================
   1. Espaco reservado para imagem
   ------------------------------------------------------------
   Quando a foto chegar, basta trocar o conteudo interno: a caixa
   ja tem proporcao, cantos e sombra corretos.
   ============================================================ */

.tribo-slot {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-lg);
	background:
		radial-gradient(80% 60% at 30% 20%, rgba(0, 74, 173, .10), rgba(0, 74, 173, 0) 60%),
		linear-gradient(160deg, #EDF3FC 0%, #E2EBF8 100%);
	border: 1px solid var(--linha);
	aspect-ratio: 4 / 3;
	display: grid;
	place-items: center;
}

.tribo-slot--retrato { aspect-ratio: 3 / 4; }
.tribo-slot--largo   { aspect-ratio: 16 / 9; }
.tribo-slot--quadro  { aspect-ratio: 1 / 1; }

/* Anel orbital no centro: marca o lugar sem parecer erro de carregamento. */
.tribo-slot::after {
	content: "";
	width: 38%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid rgba(0, 74, 173, .16);
	box-shadow:
		inset 0 0 0 1px rgba(0, 74, 173, .05),
		0 0 0 14px rgba(0, 74, 173, .03);
}

/* A imagem real, quando existir, preenche e cobre o anel. */
.tribo-slot img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.tribo-slot__nota {
	position: absolute;
	bottom: var(--e-3);
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	padding: 2px 10px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .8);
	color: var(--silencio);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* ============================================================
   2. Banda de texto com imagem
   ------------------------------------------------------------
   O padrao mais util de pagina institucional: um bloco de texto ao
   lado de uma imagem, alternando o lado a cada ocorrencia.
   ============================================================ */

.tribo-banda {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--e-8);
	align-items: center;
	margin-block: var(--e-8);
}

.tribo-banda > * { min-width: 0; }

/* Inverte o lado da imagem. Aplicar em bandas alternadas. */
.tribo-banda--invertida .tribo-banda__midia { order: -1; }

.tribo-banda__texto > :last-child { margin-bottom: 0; }

@media (max-width: 860px) {
	.tribo-banda {
		grid-template-columns: 1fr;
		gap: var(--e-5);
		margin-block: var(--e-7);
	}

	/* No celular a imagem vem sempre depois do texto: quem chegou por
	   busca quer ler antes de olhar. */
	.tribo-banda--invertida .tribo-banda__midia { order: 0; }
}

/* ============================================================
   3. Grades
   ============================================================ */

.tribo-grade {
	display: grid;
	gap: var(--e-5);
	margin-block: var(--e-6);
}

.tribo-grade--2 { grid-template-columns: repeat(2, 1fr); }
.tribo-grade--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 860px) {
	.tribo-grade--3 { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.tribo-grade--2 { grid-template-columns: 1fr; }
}

/* ============================================================
   4. Pilares: espirito, mente, corpo
   ------------------------------------------------------------
   O trio que sustenta o posicionamento do cliente. Cada um recebe
   uma cor de chakra, o que da a paleta um uso estrutural em vez de
   decorativo.
   ============================================================ */

.tribo-pilar {
	position: relative;
	padding: var(--e-6);
	padding-top: var(--e-7);
	border: 1px solid var(--linha);
	border-radius: var(--r-lg);
	background: var(--branco);
	box-shadow: var(--sombra);
}

.tribo-pilar::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--e-6);
	width: 40px;
	height: 4px;
	border-radius: 0 0 3px 3px;
}

.tribo-pilar--espirito::before { background: var(--chakra-frontal); }
.tribo-pilar--mente::before    { background: var(--chakra-laringeo); }
.tribo-pilar--corpo::before    { background: var(--chakra-cardiaco); }

.tribo-pilar h3 {
	margin-bottom: var(--e-2);
	font-size: var(--t-lg);
}

.tribo-pilar p {
	margin-bottom: 0;
	color: var(--silencio);
	font-size: var(--t-sm);
}

/* ============================================================
   5. Cartao de principio
   ------------------------------------------------------------
   Para listas de crencas e compromissos. Numerado, porque a ordem
   ali comunica prioridade -- nao e enfeite.
   ============================================================ */

.tribo-principio {
	position: relative;
	padding: var(--e-5) var(--e-5) var(--e-5) var(--e-8);
	border-left: 2px solid var(--linha);
}

.tribo-principio__n {
	position: absolute;
	left: var(--e-4);
	top: var(--e-5);
	font-family: var(--fonte-titulo);
	font-size: var(--t-lg);
	line-height: 1;
	color: var(--azul);
	opacity: .5;
}

.tribo-principio h3 {
	margin-bottom: var(--e-2);
	font-size: var(--t-md);
}

.tribo-principio p:last-child { margin-bottom: 0; }

/* ============================================================
   6. Faixa de chamada
   ------------------------------------------------------------
   Fecho de pagina. Fundo de superficie para nao competir com o
   fecho em noite da home.
   ============================================================ */

.tribo-chamada {
	margin-top: var(--e-9);
	padding: var(--e-8) var(--e-6);
	border-radius: var(--r-lg);
	background:
		radial-gradient(90% 70% at 50% 0%, rgba(0, 74, 173, .08), rgba(0, 74, 173, 0) 65%),
		var(--superficie);
	text-align: center;
}

.tribo-chamada h2 {
	margin-bottom: var(--e-3);
}

.tribo-chamada p {
	max-width: 52ch;
	margin-inline: auto;
	color: var(--silencio);
}

/* ============================================================
   7. Abertura de pagina interna
   ------------------------------------------------------------
   As paginas internas comecavam direto no texto, sem nenhuma
   entrada. Isto da a cada uma um comeco reconhecivel.
   ============================================================ */

.tribo-abertura {
	margin-bottom: var(--e-8);
	padding-bottom: var(--e-6);
	border-bottom: 1px solid var(--linha);
	text-align: center;
}

.tribo-abertura__rotulo {
	display: block;
	margin-bottom: var(--e-3);
	color: var(--azul);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.tribo-abertura h1 {
	margin-bottom: var(--e-4);
}

.tribo-abertura__lead {
	max-width: 56ch;
	margin-inline: auto;
	margin-bottom: 0;
	color: var(--silencio);
	font-size: var(--t-md);
}

/* Paginas com abertura usam a largura do container, nao a de leitura:
   a coluna estreita e para o texto corrido que vem depois. */
.tribo-page--largo {
	max-width: var(--container);
}

.tribo-page--largo .tribo-texto {
	max-width: var(--leitura);
	margin-inline: auto;
}

/* ============================================================
   8. Passos numerados
   ------------------------------------------------------------
   Para processos. O numero e grande e em cor de chakra porque ali
   a ordem e a informacao principal -- nao e enfeite numerado.
   ============================================================ */

.tribo-passos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--e-6);
	margin-block: var(--e-7);
	counter-reset: passo;
}

.tribo-passo {
	position: relative;
	padding-top: var(--e-7);
}

.tribo-passo::before {
	counter-increment: passo;
	content: counter(passo);
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--fonte-titulo);
	font-size: 42px;
	line-height: 1;
	color: var(--azul);
	opacity: .32;
}

/* Linha ligando um passo ao seguinte: mostra que ha sequencia. */
.tribo-passo::after {
	content: "";
	position: absolute;
	top: 22px;
	left: 46px;
	right: calc(var(--e-6) * -1);
	height: 1px;
	background: linear-gradient(90deg, var(--linha), rgba(219, 227, 242, 0));
}

.tribo-passo:last-child::after { display: none; }

.tribo-passo h3 {
	margin-bottom: var(--e-2);
	font-size: var(--t-md);
}

.tribo-passo p {
	margin-bottom: 0;
	color: var(--silencio);
	font-size: var(--t-sm);
}

@media (max-width: 860px) {
	.tribo-passos { grid-template-columns: 1fr; gap: var(--e-5); }
	.tribo-passo::after { display: none; }
	.tribo-passo { padding-top: var(--e-6); }
	.tribo-passo::before { font-size: 34px; }
}

/* ============================================================
   9. Prova social
   ------------------------------------------------------------
   Estrutura pronta, conteudo pendente. Depoimento inventado e pior
   que depoimento ausente: some no lancamento e volta quando houver
   gente de verdade para citar.
   ============================================================ */

.tribo-depoimento {
	position: relative;
	padding: var(--e-6);
	border-radius: var(--r-lg);
	background: var(--branco);
	border: 1px solid var(--linha);
}

.tribo-depoimento blockquote {
	margin: 0 0 var(--e-4);
	font-family: var(--fonte-titulo);
	font-size: var(--t-md);
	line-height: 1.5;
	color: var(--titulo);
}

.tribo-depoimento figcaption {
	color: var(--silencio);
	font-size: var(--t-sm);
}

/* ============================================================
   10. Blog
   ------------------------------------------------------------
   Conteudo editorial e peca de conversao, nao enfeite: e o que
   traz gente pelo buscador e o que da motivo para voltar. Por isso
   o cartao tem capa, categoria, resumo e tempo de leitura -- essa
   ultima sozinha aumenta a chance de o texto ser aberto, porque
   responde "tenho tempo agora?" antes do clique.
   ============================================================ */

.tribo-post {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--linha);
	border-radius: var(--r-lg);
	background: var(--branco);
	box-shadow: var(--sombra);
	transition: transform var(--transicao), box-shadow var(--transicao);
}

.tribo-post:hover {
	transform: translateY(-3px);
	box-shadow: var(--sombra-alta);
}

/* A capa e um link decorativo: leva ao mesmo lugar do titulo, mas sai
   da ordem de tabulacao para nao duplicar a parada de teclado. */
.tribo-post__capa {
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 0;
	margin: 0;
}

.tribo-post__corpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--e-5);
}

.tribo-post__chip {
	align-self: flex-start;
	margin-bottom: var(--e-3);
	padding: 3px 10px;
	border-radius: var(--r-pill);
	background: var(--azul-tenue);
	color: var(--azul);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.tribo-post__titulo {
	margin-bottom: var(--e-2);
	font-size: var(--t-md);
	line-height: 1.3;
}

.tribo-post__titulo a {
	color: var(--titulo);
	text-decoration: none;
}

.tribo-post__titulo a:hover { color: var(--azul); }

.tribo-post__resumo {
	flex: 1;
	margin-bottom: var(--e-3);
	color: var(--silencio);
	font-size: var(--t-sm);
}

.tribo-post__meta {
	margin: 0;
	color: var(--silencio);
	font-size: var(--t-xs);
}

/* ---- home ---- */

.tribo-blog__subtitulo {
	max-width: 54ch;
	margin: 0 auto var(--e-6);
	text-align: center;
	color: var(--silencio);
}

.tribo-blog__saida {
	margin-top: var(--e-6);
	text-align: center;
}

/* ---- pagina de arquivo ---- */

.tribo-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2);
	margin-bottom: var(--e-8);
	padding-bottom: var(--e-5);
	border-bottom: 1px solid var(--linha);
}

.tribo-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--linha);
	border-radius: var(--r-pill);
	background: var(--branco);
	color: var(--texto);
	font-size: var(--t-sm);
	text-decoration: none;
	transition: border-color var(--transicao), background var(--transicao);
}

.tribo-chip:hover {
	border-color: var(--azul);
	background: var(--azul-tenue);
	color: var(--azul-escuro);
}

.tribo-chip__n {
	color: var(--silencio);
	font-size: var(--t-xs);
	font-variant-numeric: tabular-nums;
}

.tribo-blog__grupo {
	margin-bottom: var(--e-9);
	scroll-margin-top: var(--e-8);
}

.tribo-blog__descricao {
	max-width: 60ch;
	color: var(--silencio);
	margin-bottom: var(--e-6);
}

/* ============================================================
   11. Modulos do portal
   ------------------------------------------------------------
   A home vinha funcionando como pagina de venda do mapa astral: o
   formulario ocupava o heroi e tres das oito secoes falavam so dele.

   A referencia do cliente e um portal -- a home dele roteia para
   cursos, servicos, conteudo, astrologia, taro e numerologia. Esta
   grade e o que faz a nossa distribuir em vez de vender uma coisa so.

   Cada cartao mostra os produtos do modulo por dentro, nao so o nome:
   a largura da oferta precisa aparecer sem exigir um clique.
   ============================================================ */

.tribo-modulos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
	gap: var(--e-5);
	margin-top: var(--e-7);
}

.tribo-modulo {
	display: flex;
	flex-direction: column;
	padding: var(--e-6);
	border-radius: var(--r-lg);
	background: var(--branco);
	box-shadow: var(--sombra-media);
	transition: transform var(--transicao), box-shadow var(--transicao);
}

.tribo-modulo:hover {
	transform: translateY(-3px);
	box-shadow: var(--sombra-alta);
}

/* A marca do modulo: circulo macio na cor do chakra, nao icone. */
.tribo-modulo__marca {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 19px;
	margin-bottom: var(--e-4);
}

.tribo-modulo--astro .tribo-modulo__marca { background: #E9EEF8; color: var(--agua); }
.tribo-modulo--taro  .tribo-modulo__marca { background: #F0E8F6; color: var(--chakra-frontal-texto); }
.tribo-modulo--num   .tribo-modulo__marca { background: #E5F1EA; color: var(--chakra-cardiaco-texto); }
.tribo-modulo--texto .tribo-modulo__marca { background: #FBEDDD; color: var(--chakra-sacral-texto); }

.tribo-modulo h3 {
	margin-bottom: var(--e-2);
	font-size: var(--t-lg);
}

.tribo-modulo > p {
	margin-bottom: var(--e-4);
	color: var(--silencio);
	font-size: var(--t-sm);
}

.tribo-modulo ul {
	list-style: none;
	margin: 0 0 var(--e-4);
	padding: 0;
	flex: 1;
}

.tribo-modulo li {
	border-top: 1px solid var(--linha-clara);
}

.tribo-modulo li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-3);
	padding: 10px 0;
	color: var(--tinta-media);
	font-size: var(--t-sm);
	text-decoration: none;
	transition: color var(--transicao);
}

.tribo-modulo li a::after {
	content: "\2192";
	opacity: 0;
	color: var(--azul);
	transition: opacity var(--transicao);
}

.tribo-modulo li a:hover {
	color: var(--azul);
	padding-left: 4px;
}

.tribo-modulo li a:hover::after { opacity: 1; }

/* Marca o produto que ja funciona por completo. */
.tribo-modulo .tribo-selo {
	flex: 0 0 auto;
	padding: 2px 8px;
	border-radius: var(--r-pill);
	background: #E5F1EA;
	color: #35784F;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
}

/* ============================================================
   12. Padroes de portal
   ------------------------------------------------------------
   Tres estruturas que a referencia usa e faltavam aqui:

     atalhos  faixa de produtos logo abaixo do heroi, para levar a
              ferramenta a primeira tela sem depender do menu
     chips    navegacao por area da vida -- o segundo eixo, que
              atende quem chega pela dor e nao pela ferramenta
     numeros  credibilidade em fatos verificaveis
   ============================================================ */

/* ---- Faixa de atalhos ---- */

.tribo-atalhos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 1px;
	background: var(--linha-clara);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sombra-media);
}

.tribo-atalho {
	display: flex;
	gap: var(--e-3);
	padding: var(--e-5);
	background: var(--branco);
	text-decoration: none;
	transition: background var(--transicao);
}

.tribo-atalho:hover { background: var(--leite); }

.tribo-atalho__marca {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 17px;
}

.tribo-atalho__nome {
	display: block;
	margin-bottom: 2px;
	color: var(--tinta);
	font-weight: 600;
	font-size: var(--t-sm);
}

.tribo-atalho__linha {
	display: block;
	color: var(--silencio);
	font-size: 13.5px;
	line-height: 1.45;
}

/* ---- Navegacao por area da vida ---- */

.tribo-areas { text-align: center; }

.tribo-areas__titulo {
	margin-bottom: var(--e-4);
	color: var(--silencio);
	font-size: var(--t-sm);
	font-weight: 500;
}

.tribo-areas__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--e-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tribo-area {
	display: inline-block;
	padding: 9px 17px;
	border-radius: var(--r-pill);
	background: var(--branco);
	color: var(--tinta-media);
	font-size: var(--t-sm);
	text-decoration: none;
	box-shadow: var(--sombra);
	transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}

.tribo-area:hover {
	background: var(--azul);
	color: #fff;
	transform: translateY(-2px);
}

/* ---- Numeros ---- */

.tribo-numeros {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--e-6);
	text-align: center;
}

.tribo-numero__v {
	display: block;
	font-family: var(--fonte-titulo);
	font-weight: 400;
	font-size: clamp(30px, 4.4vw, 46px);
	line-height: 1;
	color: var(--azul);
	font-variant-numeric: tabular-nums;
	margin-bottom: var(--e-2);
}

/* O cinza padrao dava 4,30:1 sobre o fundo leite -- abaixo dos 4,5
   exigidos para texto pequeno. Tinta media resolve com folga. */
.tribo-numero__r {
	display: block;
	color: var(--tinta-media);
	font-size: var(--t-sm);
	line-height: 1.5;
	max-width: 26ch;
	margin-inline: auto;
}

@media (max-width: 700px) {
	.tribo-numeros { grid-template-columns: 1fr; gap: var(--e-5); }
}

/* ============================================================
   13. Silhueta de portal
   ------------------------------------------------------------
   Quatro pecas estruturais que a referencia do nicho usa e definem
   o formato da pagina. Disposicao e funcional: o que e nosso aqui e
   a cor, a tipografia e o texto.
   ============================================================ */

/* ---- Cartao de produtos sobrepondo a base do heroi ----
   A sobreposicao costura as duas secoes: o heroi deixa de terminar
   numa linha reta e a faixa deixa de flutuar solta. */

.tribo-vitrine {
	position: relative;
	z-index: 3;
	margin-top: -46px;
	margin-bottom: 8px;
}

@media (max-width: 900px) {
	.tribo-vitrine { margin-top: var(--e-5); }
}

/* ---- Cartao de conteudo com categoria e autor ---- */

.tribo-post__cat {
	display: block;
	margin-bottom: var(--e-2);
	color: var(--azul);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.tribo-post__autor {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: var(--e-4);
	padding-top: var(--e-3);
	border-top: 1px solid var(--linha-clara);
}

.tribo-post__avatar {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--acao-tenue);
	color: var(--azul);
	font-family: var(--fonte-titulo);
	font-size: 14px;
}

.tribo-post__quem {
	display: block;
	color: var(--tinta);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.tribo-post__quando {
	display: block;
	color: var(--silencio);
	font-size: 12px;
}

/* ============================================================
   14. Cartao de entrada do heroi
   ------------------------------------------------------------
   Duas ofertas num cartao so, uma por aba. E o que permite o
   formulario voltar ao heroi sem a home virar venda de um produto
   unico -- a critica que o cliente fez.
   ============================================================ */

.tribo-cartao {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--branco);
	box-shadow: 0 3px 6px rgba(43,51,64,.05), 0 22px 54px rgba(43,51,64,.14);
}

.tribo-cartao__abas {
	display: flex;
	background: var(--areia);
}

.tribo-aba {
	flex: 1;
	padding: 15px 12px;
	border: 0;
	background: transparent;
	color: var(--tinta-suave);
	font-family: var(--fonte-texto);
	font-size: var(--t-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--transicao), color var(--transicao);
}

.tribo-aba:hover { color: var(--tinta); }

.tribo-aba--ativa {
	background: var(--branco);
	color: var(--azul);
}

.tribo-cartao__corpo {
	position: relative;
	padding: var(--e-6) var(--e-6) var(--e-5);
}

/* Selo de gratuidade: circulo quente sobre o canto, como na referencia. */
.tribo-cartao__selo {
	position: absolute;
	top: -14px;
	right: var(--e-5);
	z-index: 2;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--chakra-sacral);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	box-shadow: 0 4px 12px rgba(232,150,74,.4);
}

.tribo-cartao__titulo {
	margin-bottom: var(--e-2);
	padding-right: 62px;
	font-size: var(--t-lg);
	line-height: 1.15;
}

.tribo-cartao__lead {
	margin-bottom: var(--e-5);
	color: var(--silencio);
	font-size: var(--t-sm);
}

.tribo-painel[hidden] { display: none; }

.tribo-cartao__passos {
	margin: 0 0 var(--e-5);
	padding-left: 20px;
}

.tribo-cartao__passos li {
	margin-bottom: 8px;
	color: var(--tinta-media);
	font-size: var(--t-sm);
}

.tribo-cartao__voltar { width: 100%; }

/* O cartao ja tem titulo proprio; o do formulario sairia repetido. */
.tribo-cartao .tribo-form {
	padding: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
}

.tribo-cartao .tribo-form::before { content: none; }
.tribo-cartao .tribo-form__title,
.tribo-cartao .tribo-form__lead { display: none; }

/* ============================================================
   Contraste do cartao: correcao
   ------------------------------------------------------------
   Medido depois de subir: a aba inativa dava 3,94:1 e o selo
   "gratis" 2,36:1 -- ambos abaixo dos 4,5 exigidos.

   O selo era laranja de chakra com texto branco. Laranja claro e
   bonito e nao sustenta texto branco; invertido -- fundo claro,
   texto na versao legivel da cor -- passa com folga e continua
   sendo o mesmo acento da paleta.
   ============================================================ */

html .tribo-aba {
	color: var(--tinta-media);
}

html .tribo-cartao__selo {
	background: #FBEDDD;
	color: #8A4E12;
	box-shadow: 0 4px 12px rgba(43, 51, 64, .12);
	font-size: 12.5px;
}

/* ============================================================
   Rodape
   ------------------------------------------------------------
   O anterior tinha 297px e tres informacoes. Este e um mapa do
   site: quem terminou de ler um texto encontra aqui para onde ir
   sem voltar ao topo.

   Fundo em superficie, nao em azul-noite. A direcao Primeira Luz
   e clara do inicio ao fim, e um bloco escuro no pe da pagina
   seria o unico lugar onde o site muda de mundo.
   ============================================================ */

.tribo-rodape {
	max-width: 1080px;
	margin-inline: auto;
	padding-inline: var(--e-7);
}

/* A faixa inteira, incluindo o que sobra nas laterais. */
.elementor-location-footer {
	margin-top: var(--e-9);
	border-top: 1px solid var(--linha);
	background:
		radial-gradient(80% 100% at 15% 0%, rgba(0, 74, 173, .05), rgba(0, 74, 173, 0) 60%),
		var(--superficie);
}

/* O espectro dos chakras assina o topo, como no cartao do heroi. */
.elementor-location-footer::before {
	content: "";
	display: block;
	height: 3px;
	margin-top: -1px;
	background: var(--espectro);
}

.tribo-rodape__topo {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 2.6fr);
	gap: var(--e-8);
	padding-block: var(--e-8) var(--e-7);
}

/* -------------------------------------------------- marca e contato -- */

.tribo-rodape__nome {
	margin-bottom: var(--e-2);
	font-family: var(--fonte-titulo);
	font-size: var(--t-lg);
	line-height: 1.2;
	color: var(--titulo);
}

.tribo-rodape__lema {
	margin-bottom: var(--e-5);
	max-width: 34ch;
	color: var(--texto);
	font-size: var(--t-sm);
	line-height: 1.6;
}

.tribo-rodape__busca {
	display: flex;
	gap: 6px;
	margin-bottom: var(--e-5);
	max-width: 320px;
}

.tribo-rodape__contato {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--t-sm);
	color: var(--texto);
}

.tribo-rodape__contato li {
	margin-bottom: 6px;
}

/* ------------------------------------------------------- as colunas -- */

.tribo-rodape__colunas {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--e-6) var(--e-5);
}

.tribo-rodape__titulo {
	margin-bottom: var(--e-4);
	color: var(--titulo);
	font-family: var(--fonte-texto);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.tribo-rodape__colunas ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tribo-rodape__colunas li {
	margin-bottom: 9px;
}

.tribo-rodape a {
	color: var(--texto);
	font-size: var(--t-sm);
	text-decoration: none;
	transition: color var(--transicao);
}

.tribo-rodape a:hover {
	color: var(--azul);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------- a base -- */

.tribo-rodape__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-3) var(--e-5);
	padding-block: var(--e-5);
	border-top: 1px solid var(--linha);
	font-size: var(--t-xs);
	color: var(--texto);
}

.tribo-rodape__direitos {
	margin: 0;
}

.tribo-rodape__legais,
.tribo-rodape__redes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* O meio de pagamento vai para a direita: e a ultima coisa que a
   pessoa confere antes de decidir comprar. */
.tribo-rodape__pagamento {
	margin: 0 0 0 auto;
	padding: 5px 12px;
	border: 1px solid var(--linha);
	border-radius: var(--r-pill);
	background: var(--branco);
}

.tribo-rodape__base a {
	font-size: var(--t-xs);
}

/* ------------------------------------------------------- responsivo -- */

@media (max-width: 900px) {
	.tribo-rodape__topo {
		grid-template-columns: 1fr;
		gap: var(--e-7);
	}

	.tribo-rodape__colunas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.tribo-rodape {
		padding-inline: var(--e-5);
	}

	.tribo-rodape__colunas {
		grid-template-columns: 1fr;
		gap: var(--e-6);
	}

	.tribo-rodape__busca {
		max-width: none;
	}

	.tribo-rodape__pagamento {
		margin-left: 0;
	}
}

/* ============================================================
   Pagina de resultados de busca
   ------------------------------------------------------------
   Virou superficie de verdade quando o rodape ganhou campo de
   busca em toda pagina. Antes era a lista crua do WordPress.
   ============================================================ */

.tribo-busca-pagina {
	max-width: 780px;
	margin-inline: auto;
	padding: var(--e-8) var(--e-7) var(--e-9);
}

.tribo-busca-pagina__topo {
	margin-bottom: var(--e-7);
	padding-bottom: var(--e-6);
	border-bottom: 1px solid var(--linha);
}

.tribo-busca-pagina__rotulo {
	margin-bottom: var(--e-3);
	color: var(--azul);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.tribo-busca-pagina h1 {
	margin-bottom: var(--e-5);
	font-size: var(--t-2xl);
	line-height: 1.15;
}

/* O termo buscado, destacado dentro do titulo. */
.tribo-busca-pagina h1 span {
	color: var(--azul);
}

.tribo-busca-pagina__form {
	display: flex;
	gap: 8px;
	max-width: 460px;
}

/* ------------------------------------------------------- a lista -- */

.tribo-busca-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tribo-busca-item + .tribo-busca-item {
	margin-top: var(--e-3);
}

/* O cartao inteiro e o alvo do clique: alvo grande erra menos,
   principalmente no celular. */
.tribo-busca-item__link {
	display: block;
	padding: var(--e-5);
	border: 1px solid var(--linha);
	border-radius: var(--r-lg);
	background: var(--branco);
	text-decoration: none;
	transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}

.tribo-busca-item__link:hover {
	border-color: var(--azul);
	box-shadow: 0 6px 20px rgba(9, 24, 46, .08);
	transform: translateY(-1px);
}

.tribo-busca-item__tipo {
	display: inline-block;
	margin-bottom: var(--e-2);
	color: var(--azul);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.tribo-busca-item__titulo {
	margin-bottom: var(--e-2);
	font-size: var(--t-lg);
	line-height: 1.25;
	color: var(--titulo);
}

.tribo-busca-item__resumo {
	margin-bottom: 0;
	color: var(--texto);
	font-size: var(--t-sm);
	line-height: 1.6;
}

/* ------------------------------------------------------- o vazio -- */

.tribo-busca-vazio {
	padding: var(--e-7);
	border: 1px solid var(--linha);
	border-radius: var(--r-lg);
	background:
		radial-gradient(90% 70% at 50% 0%, rgba(0, 74, 173, .06), rgba(0, 74, 173, 0) 65%),
		var(--superficie);
}

.tribo-busca-vazio__texto {
	max-width: 56ch;
	color: var(--texto);
}

.tribo-busca-vazio__saidas {
	margin-top: var(--e-6);
	padding-top: var(--e-5);
	border-top: 1px solid var(--linha);
}

.tribo-busca-vazio__rotulo {
	margin-bottom: var(--e-3);
	color: var(--texto);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.tribo-busca-vazio__saidas ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3) var(--e-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tribo-busca-vazio__saidas a {
	color: var(--azul);
	font-size: var(--t-sm);
	text-decoration: none;
}

.tribo-busca-vazio__saidas a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------- paginacao -- */

.tribo-busca-pagina .pagination,
.tribo-busca-pagina .navigation {
	margin-top: var(--e-7);
}

.tribo-busca-pagina .page-numbers {
	display: inline-block;
	min-width: 38px;
	padding: 8px 10px;
	border: 1px solid var(--linha);
	border-radius: var(--r);
	background: var(--branco);
	color: var(--texto);
	font-size: var(--t-sm);
	text-align: center;
	text-decoration: none;
}

.tribo-busca-pagina .page-numbers.current {
	border-color: var(--azul);
	background: var(--azul);
	color: #fff;
}

@media (max-width: 560px) {
	.tribo-busca-pagina {
		padding: var(--e-7) var(--e-5) var(--e-8);
	}

	.tribo-busca-pagina__form {
		flex-wrap: wrap;
	}

	.tribo-busca-pagina__form input {
		flex-basis: 100%;
	}
}

/* ============================================================
   Planos
   ------------------------------------------------------------
   A pagina existia vazia. Os precos vem do WooCommerce, entao o
   componente nao sabe quantos planos vai receber -- a grade se
   ajusta em vez de assumir dois.
   ============================================================ */

.tribo-planos {
	margin-block: var(--e-7);
}

.tribo-planos__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--e-5);
	align-items: stretch;
}

.tribo-plano {
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	padding: var(--e-7) var(--e-6) var(--e-6);
	border: 1px solid var(--linha);
	border-radius: var(--r-lg);
	background: var(--branco);
	box-shadow: var(--sombra);
}

/* O espectro assina o topo, como no cartao do heroi e no rodape. */
.tribo-plano::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--espectro);
}

.tribo-plano__nome {
	margin-bottom: var(--e-4);
	font-size: var(--t-lg);
	line-height: 1.2;
	color: var(--titulo);
}

.tribo-plano__preco {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: var(--e-2);
}

.tribo-plano__valor {
	font-family: var(--fonte-titulo);
	font-size: var(--t-2xl);
	line-height: 1;
	color: var(--titulo);
}

/* O WooCommerce embrulha o valor em spans proprios. */
.tribo-plano__valor .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}

.tribo-plano__periodo {
	color: var(--texto);
	font-size: var(--t-sm);
}

.tribo-plano__equivalente {
	margin-bottom: var(--e-4);
	color: var(--texto);
	font-size: var(--t-sm);
}

.tribo-plano__descricao {
	margin-bottom: var(--e-6);
	color: var(--texto);
	font-size: var(--t-sm);
	line-height: 1.6;
}

/* Empurra o botao para a base: com descricoes de tamanhos diferentes,
   os botoes dos cartoes vizinhos continuam alinhados. */
.tribo-plano__botao {
	margin-top: auto;
	text-align: center;
}

.tribo-planos__notas {
	margin-top: var(--e-6);
	padding-top: var(--e-5);
	border-top: 1px solid var(--linha);
}

.tribo-planos__notas p {
	margin-bottom: var(--e-2);
	max-width: 62ch;
	color: var(--texto);
	font-size: var(--t-sm);
}

.tribo-planos__notas p:last-child {
	margin-bottom: 0;
}

/* ============================================================
   Heroi -- desenho aprovado em 01/09/2026
   ------------------------------------------------------------
   O cliente gerou a referencia e aprovou. Diferencas medidas
   contra o site de entao, em tela de 1280x860:

     cartao 762px terminando a 1029px, com a dobra em 860 -- o
     botao principal ficava 168px abaixo dela;
     cinco campos visiveis no primeiro passo, incluindo "Sistema
     de casas", opcao tecnica de astrologo;
     faixa de produtos solta 129px abaixo do heroi, em vez de
     sobreposta a base da foto.

   As notas longas de cada campo continuam existindo na pagina
   dedicada do mapa. Elas explicam consequencia real (fuso, hora
   ausente) e ali ha espaco. No cartao do heroi, nao ha.
   ============================================================ */

/* ---------------------------------------------------- o cartao -- */

/* O cartao do heroi e uma peca de conversao, nao um formulario
   completo: tres campos, um botao, nada competindo. */
html .tribo-cartao .tribo-form {
	padding: var(--e-6);
	box-shadow: none;
	border: 0;
	border-radius: 0;
	background: transparent;
}

html .tribo-cartao .tribo-form::before {
	display: none;
}

/* O cartao ja tem titulo e linha de apoio proprios. */
html .tribo-cartao .tribo-form__title,
html .tribo-cartao .tribo-form__lead,
html .tribo-cartao .tribo-fieldset legend {
	display: none;
}

/* As explicacoes longas ficam so na pagina dedicada. */
html .tribo-cartao .tribo-field__note {
	display: none;
}

html .tribo-cartao .tribo-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Data e hora lado a lado ocupavam duas colunas estreitas demais
   para o formato "dd/mm/aaaa". Empilhados, cada um respira. */
html .tribo-cartao .tribo-field-row {
	display: block;
}

html .tribo-cartao .tribo-field {
	margin-bottom: var(--e-4);
}

html .tribo-cartao .tribo-field label {
	display: block;
	margin-bottom: 6px;
	color: var(--tinta);
	font-size: var(--t-sm);
	font-weight: 500;
}

html .tribo-cartao .tribo-field input[type="date"],
html .tribo-cartao .tribo-field input[type="time"],
html .tribo-cartao .tribo-field input[type="text"] {
	width: 100%;
	padding: 12px 40px 12px 14px;
	border: 1px solid var(--linha);
	border-radius: var(--r);
	background-color: var(--branco);
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px 18px;
	color: var(--tinta);
	font: inherit;
	font-size: var(--t-sm);
}

/* Icone dentro do campo, como na referencia. Desenhado em SVG
   embutido: zero requisicao e acompanha a cor do texto suave. */
html .tribo-cartao #tribo-data {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

html .tribo-cartao #tribo-hora {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

html .tribo-cartao #tribo-local {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

html .tribo-cartao .tribo-field input:focus-visible {
	outline: 2px solid var(--azul);
	outline-offset: 1px;
	border-color: var(--azul);
}

/* "Nao sei a hora exata" vira uma linha discreta sob o campo,
   nao um bloco com paragrafo de explicacao. */
html .tribo-cartao .tribo-field--check {
	margin-top: calc(var(--e-4) * -1 + 4px);
	margin-bottom: var(--e-4);
}

html .tribo-cartao .tribo-field--check label {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	color: var(--silencio);
	font-size: 13px;
	font-weight: 400;
}

html .tribo-cartao .tribo-field--check input {
	width: auto;
	margin: 0;
}

/* ---- rotulo flutuante, quebrando a borda do campo ------------- */

/* Padrao do nicho: o rotulo senta sobre a linha superior da caixa
   em vez de ficar acima dela. Feito so com CSS, sem trocar o
   HTML: o rotulo vira position:absolute sobre a borda, e seu
   fundo -- igual ao fundo do cartao atras dele -- apaga o
   trecho da borda por baixo. O <label for> original continua
   linkado ao input, entao a leitura por teclado e leitor de tela
   nao muda em nada.

   So os campos de texto/data/hora ganham o tratamento; o
   checkbox "Nao sei a hora" continua com rotulo ao lado, que e
   o formato certo para aquele tipo de campo. */
html .tribo-cartao .tribo-field:not(.tribo-field--check) {
	position: relative;
	margin-top: 11px;
}

html .tribo-cartao .tribo-field:not(.tribo-field--check) label {
	position: absolute;
	top: -8px;
	left: 12px;
	z-index: 1;
	padding: 0 6px;
	margin: 0;
	background: var(--branco);
	color: var(--tinta-media);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .01em;
}

html .tribo-cartao .tribo-field input[type="date"],
html .tribo-cartao .tribo-field input[type="time"],
html .tribo-cartao .tribo-field input[type="text"] {
	border-color: #CFD5DD;
	font-weight: 500;
}

/* ---- "Ja tenho cadastro", abaixo do botao --------------------- */

html .tribo-cartao__conta {
	margin: var(--e-3) 0 0;
	text-align: center;
}

html .tribo-cartao__conta a {
	color: var(--azul);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
}

html .tribo-cartao__conta a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------- abas -- */

html .tribo-cartao__abas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border-bottom: 1px solid var(--linha);
}

/* Abas no padrao do nicho: a inativa carrega fundo escuro (a
   tinta da marca, nao preto), a ativa e branca com sublinhado.
   Contraste medido: branco sobre --tinta da 14,9:1. */
html .tribo-cartao .tribo-aba {
	padding: 18px 12px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: var(--tinta);
	color: rgba(255, 255, 255, .82);
	font: inherit;
	font-size: var(--t-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--transicao), color var(--transicao);
}

html .tribo-cartao .tribo-aba--ativa {
	border-bottom-color: var(--azul);
	background: var(--branco);
	color: var(--tinta);
}

html .tribo-cartao .tribo-aba:hover:not(.tribo-aba--ativa) {
	background: var(--tinta-media);
	color: #fff;
}

html .tribo-cartao .tribo-aba:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* ------------------------------------------------------- selo -- */

/* Pilula no topo do corpo, com um ponto de chakra como marca. */
html .tribo-cartao__corpo {
	padding: var(--e-6) var(--e-6) var(--e-5);
}

/* Selo circular flutuante no canto, como no padrao do nicho --
   nao mais uma pilula inline no fluxo do texto. Ancora em
   .tribo-cartao (position:relative acima), entao aparece no
   mesmo lugar nas duas abas, sem depender de qual esta ativa.

   Laranja proprio da paleta, escurecido ate passar 4,5:1 com
   texto branco (a versao clara, --chakra-sacral, fica em 2,36 --
   bonita como acento, ilegivel como fundo de selo). */
html .tribo-cartao__selo {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	padding: 0 4px;
	border: 3px solid var(--branco);
	border-radius: 50%;
	background: #AB6621;
	box-shadow: 0 6px 16px rgba(171, 102, 33, .35);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .02em;
	text-align: center;
	text-transform: uppercase;
	line-height: 1.15;
}

html .tribo-cartao__selo::before {
	content: none;
}

/* Titulo em sem-serifa forte, nao na serifa dos titulos de
   secao: no cartao de conversao o padrao do nicho e peso, nao
   elegancia editorial. Reserva espaco a direita para nao passar
   por baixo do selo circular. */
html .tribo-cartao__titulo {
	margin-bottom: var(--e-2);
	max-width: calc(100% - 60px);
	font-family: var(--fonte-texto);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -.01em;
	color: var(--tinta);
}

html .tribo-cartao__lead {
	margin-bottom: var(--e-5);
	max-width: calc(100% - 20px);
	color: var(--texto);
	font-size: var(--t-sm);
	line-height: 1.5;
}

/* --------------------------------------------- faixa de produtos -- */

/* Sobreposta a base da foto, como na referencia: amarra o heroi ao
   resto da pagina e mostra que o site e um portal, nao a venda de
   um produto so. */
html .tribo-atalhos {
	position: relative;
	z-index: 2;
	margin-top: -68px;
	padding: var(--e-6) var(--e-5);
	border-radius: var(--r-lg);
	background: var(--branco);
	box-shadow: 0 18px 50px rgba(9, 24, 46, .14), 0 2px 6px rgba(9, 24, 46, .05);
}

@media (max-width: 860px) {
	html .tribo-atalhos {
		margin-top: var(--e-5);
	}
}

/* ============================================================
   Topo
   ------------------------------------------------------------
   Uma linha: marca a esquerda, navegacao ao centro, busca e
   conta a direita. O anterior tinha 109px e o menu inteiro
   duplicado no HTML -- a versao de desktop e a de celular,
   ambas sempre presentes.
   ============================================================ */

.tribo-topo {
	display: grid;

	/* A coluna do meio pede o que precisa, e nao recebe a sobra. Com `1fr`
	   ela era espremida pelas outras duas e a fila transbordava por cima
	   do logotipo -- medido em 06/09/2026: 573px de itens numa trilha de
	   549. O teto subiu junto: a barra ganhou Taro e o login do aluno, e
	   1240px deixaram de bastar. */
	grid-template-columns: auto max-content auto;
	justify-content: space-between;
	align-items: center;
	gap: var(--e-5);
	max-width: 1320px;
	margin-inline: auto;
	padding: 14px var(--e-7);
}

.elementor-location-header {
	position: relative;
	z-index: 10;
	border-bottom: 1px solid var(--linha);
	background: var(--branco);
}

/* ---- marca ---- */

.tribo-topo__marca {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.tribo-topo__nome {
	font-family: var(--fonte-titulo);
	font-size: 25px;
	font-weight: 400;
	letter-spacing: .005em;
	color: var(--titulo);
	white-space: nowrap;
}

.tribo-topo__logo {
	display: block;
	width: auto;
	height: 42px;
}

/* ---- navegacao ---- */

.tribo-topo__nav {
	min-width: 0;
}

.tribo-topo__lista {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px clamp(9px, 1vw, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tribo-topo__lista a {
	display: block;
	padding: 8px 12px;
	border-radius: var(--r);
	color: var(--tinta-media);
	font-size: var(--t-sm);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--transicao), background var(--transicao);
}

.tribo-topo__lista a:hover {
	background: var(--leite);
	color: var(--azul);
}

.tribo-topo__lista .tribo-topo__atual,
.tribo-topo__lista .current-menu-item > a {
	color: var(--azul);
	font-weight: 600;
}

/* ---- acoes ---- */

.tribo-topo__acoes {
	display: flex;
	align-items: center;
	gap: 2px;
}

.tribo-topo__icone {
	width: 21px;
	height: 21px;
}

.tribo-topo__conta,
.tribo-topo__busca > summary {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--tinta-media);
	cursor: pointer;
	list-style: none;
	transition: background var(--transicao), color var(--transicao);
}

.tribo-topo__conta:hover,
.tribo-topo__busca > summary:hover {
	background: var(--leite);
	color: var(--azul);
}

.tribo-topo__conta:focus-visible,
.tribo-topo__busca > summary:focus-visible {
	outline: 2px solid var(--azul);
	outline-offset: 2px;
}

/* Some o triangulo nativo do <details> nos dois motores. */
.tribo-topo__busca > summary::-webkit-details-marker { display: none; }
.tribo-topo__busca > summary::marker { content: ""; }

.tribo-topo__busca {
	position: relative;
}

/* O campo abre sobre a pagina, sem empurrar o topo para baixo. */
.tribo-topo__busca[open] > form {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 20;
	display: flex;
	gap: 6px;
	padding: 10px;
	border: 1px solid var(--linha);
	border-radius: var(--r-lg);
	background: var(--branco);
	box-shadow: 0 14px 40px rgba(9, 24, 46, .16);
}

/* ---- responsivo ---- */

@media (max-width: 980px) {
	.tribo-topo {
		/* Nenhuma das duas colunas pode ser dimensionada por conteudo.
		   A navegacao atravessa as duas (grid-column: 1 / -1), e um item
		   que atravessa trilhas `auto` ou `max-content` estica essas
		   trilhas ate a largura do proprio conteudo. Era o que acontecia:
		   medido em 05/09/2026, a barra tinha 2375px num visor de 375px.
		   Como o body tem overflow-x: clip, a pagina nao rolava de lado --
		   os itens de menu simplesmente sumiam pela direita, sem jeito
		   nenhum de alcanca-los no celular.
		   Coluna da marca do tamanho do logotipo, a outra leva o resto:
		   assim a soma e a largura da tela, e o overflow-x: auto da barra
		   volta a rolar por dentro, que era a intencao original. */
		--tribo-logo-largura: 171px;

		grid-template-columns: var(--tribo-logo-largura) minmax(0, 1fr);
		gap: var(--e-3);
		padding-inline: var(--e-5);
	}

	/* A navegacao passa para a segunda linha, ocupando a largura toda, e
	   rola na horizontal em vez de quebrar em duas alturas. */
	.tribo-topo__nav {
		order: 3;
		grid-column: 1 / -1;
		min-width: 0;
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;

		/* Rolagem por toque com parada suave, e sem a barra roubando
		   altura no iOS. */
		-webkit-overflow-scrolling: touch;
	}

	.tribo-topo__nav::-webkit-scrollbar { display: none; }

	.tribo-topo__lista {
		justify-content: flex-start;
		flex-wrap: nowrap;
	}

	.tribo-topo__acoes {
		margin-left: auto;
	}
}

@media (max-width: 560px) {
	.tribo-topo__busca[open] > form {
		right: -56px;
	}

	.tribo-topo__busca input {
		width: 190px;
	}
}

/* ============================================================
   Heroi -- alturas
   ------------------------------------------------------------
   Medido depois de encurtar o cartao: 701px de altura, com o
   botao "Continuar" terminando a 861px. A dobra esta em 860.
   Um pixel -- e um pixel e o suficiente para a pessoa nao ver
   que existe um botao.

   O topo do heroi carregava os mesmos 96px de respiro que toda
   secao da pagina. No heroi isso e espaco morto: ele ja tem a
   foto inteira como respiro.
   ============================================================ */

html .elementor > .e-con.elementor-element-22378d4 {
	padding-top: 32px;
}

/* A faixa de produtos precisa subir sobre a base da foto. A
   secao que a contem trazia 96px de respiro no topo, que
   anulavam a margem negativa: a faixa acabava 62px ABAIXO do
   heroi em vez de sobreposta a ele. */
html .elementor > .e-con:has(.tribo-atalhos) {
	padding-top: 0;
}

html .tribo-atalhos {
	margin-top: -100px;
}

@media (max-width: 860px) {
	html .elementor > .e-con.elementor-element-22378d4 {
		padding-top: var(--e-7);
	}

	html .elementor > .e-con:has(.tribo-atalhos) {
		padding-top: var(--e-7);
	}

	html .tribo-atalhos {
		margin-top: 0;
	}
}

/* ============================================================
   Heroi -- correcoes vistas na captura
   ------------------------------------------------------------
   Quatro defeitos que a medicao por numero nao pega e a imagem
   entrega na hora. Vale o registro: altura e contraste eu media
   e passavam; isto so aparece olhando.
   ============================================================ */

/* 2. O botao do primeiro passo vinha com contorno e texto em
      rosa #CC3366 -- cor que nao existe na paleta do projeto.
      A acao principal do site e azul e solida. */
html .tribo-cartao .tribo-form .tribo-button,
html .tribo-cartao .tribo-form .tribo-button--continuar {
	border: 0;
	background: var(--azul);
	color: #fff;
	font-weight: 700;
	font-size: 15.5px;
	box-shadow: 0 6px 18px rgba(0, 74, 173, .28);
}

html .tribo-cartao .tribo-form .tribo-button:hover {
	background: var(--tinta);
	box-shadow: 0 8px 22px rgba(0, 74, 173, .34);
}

/* 3. Campo de data e de hora mostravam dois icones: o meu, de
      fundo, e o nativo do navegador. O nativo fica invisivel mas
      continua clicavel por cima do meu, entao o clique ainda
      abre o seletor do sistema. */
html .tribo-cartao input[type="date"],
html .tribo-cartao input[type="time"] {
	position: relative;
}

html .tribo-cartao input[type="date"]::-webkit-calendar-picker-indicator,
html .tribo-cartao input[type="time"]::-webkit-calendar-picker-indicator {
	position: absolute;
	right: 0;
	top: 0;
	width: 42px;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}

/* 4. O titulo do heroi estava no azul das acoes. Azul e a cor do
      que se clica; o titulo nao se clica, e sobre foto ele perde
      legibilidade. Volta para a tinta. */
html .elementor-element-22378d4 h1 {
	color: var(--titulo);
}

/* O titulo do heroi perdia para uma regra do proprio Elementor,
   .elementor-widget-heading .elementor-heading-title, que tem duas
   classes contra a minha uma. Igualar o alvo resolve sem !important. */
html .elementor-element-22378d4 .elementor-heading-title {
	color: var(--titulo);
}

/* ============================================================
   Topo -- submenus
   ------------------------------------------------------------
   O cliente pediu caminho facil para tudo. A lista plana de seis
   itens deixava cinco paginas de produto alcancaveis so pelo
   rodape. Agrupar tambem e o que permite crescer: uma leitura
   nova entra no grupo existente, sem disputar espaco na barra.

   Abre no hover e no foco, sem JavaScript.
   ============================================================ */

.tribo-topo__item {
	position: relative;
}

.tribo-topo__grupo {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 12px;
	border: 0;
	border-radius: var(--r);
	background: none;
	color: var(--tinta-media);
	font: inherit;
	font-size: var(--t-sm);
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--transicao), background var(--transicao);
}

.tribo-topo__grupo .tribo-topo__icone {
	width: 15px;
	height: 15px;
	transition: transform var(--transicao);
}

.tribo-topo__item:hover .tribo-topo__grupo,
.tribo-topo__item:focus-within .tribo-topo__grupo {
	background: var(--leite);
	color: var(--azul);
}

.tribo-topo__item:hover .tribo-topo__icone,
.tribo-topo__item:focus-within .tribo-topo__icone {
	transform: rotate(180deg);
}

.tribo-topo__grupo:focus-visible {
	outline: 2px solid var(--azul);
	outline-offset: 2px;
}

/* O submenu fica no HTML sempre; o que muda e a visibilidade.
   Assim leitor de tela alcanca os itens mesmo sem hover. */
.tribo-topo__sub {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 30;
	min-width: 232px;
	margin: 0;
	padding: 8px;
	list-style: none;
	border: 1px solid var(--linha);
	border-radius: var(--r-lg);
	background: var(--branco);
	box-shadow: 0 16px 44px rgba(9, 24, 46, .16);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}

.tribo-topo__item:hover > .tribo-topo__sub,
.tribo-topo__item:focus-within > .tribo-topo__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* A lista interna: o <div class="tribo-topo__sub"> e o painel, e o
   <ul> dentro dele e so a lista. */
.tribo-topo__sub-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tribo-topo__sub a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--r);
	color: var(--tinta-media);
	font-size: var(--t-sm);
	text-decoration: none;
	white-space: nowrap;
}

.tribo-topo__sub a:hover,
.tribo-topo__sub a:focus-visible {
	background: var(--leite);
	color: var(--azul);
}

/* Quando o cliente monta o menu pelo painel, o WordPress usa .sub-menu. */
.tribo-topo__lista .menu-item-has-children {
	position: relative;
}

.tribo-topo__lista .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 30;
	min-width: 232px;
	margin: 0;
	padding: 8px;
	list-style: none;
	border: 1px solid var(--linha);
	border-radius: var(--r-lg);
	background: var(--branco);
	box-shadow: 0 16px 44px rgba(9, 24, 46, .16);
	opacity: 0;
	visibility: hidden;
}

.tribo-topo__lista .menu-item-has-children:hover > .sub-menu,
.tribo-topo__lista .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

/* No celular o submenu vira lista aberta: nao ha hover, e um painel
   flutuante sobre uma barra que ja rola na horizontal e armadilha. */
@media (max-width: 980px) {
	.tribo-topo__sub,
	.tribo-topo__lista .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 0 var(--e-3);
		border: 0;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: flex;
		gap: 2px;
	}

	.tribo-topo__item--grupo {
		display: flex;
		align-items: center;
	}

	.tribo-topo__grupo {
		display: none;
	}
}

/* ============================================================
   Heroi -- caber na dobra
   ------------------------------------------------------------
   Medido em 1280x860: o heroi tinha 895px de altura sozinho --
   mais que a tela inteira. Com o topo de 92px, ele precisa
   caber em 768px, e o cartao sozinho tinha 747.

   Entao o corte vem dos dois lados: respiro do heroi, e dentro
   do cartao. Nenhum campo sai; o que sai e espaco e tamanho.
   ============================================================ */

html .elementor > .e-con.elementor-element-22378d4 {
	padding-top: 24px;
	padding-bottom: 56px;
}

/* O titulo em 58px ocupava 139px em duas linhas. Em 44 ele
   continua sendo a maior voz da pagina e devolve 34px. */
html .elementor-element-22378d4 .elementor-heading-title {
	font-size: 44px;
	line-height: 1.12;
}

/* ---- dentro do cartao ---- */

html .tribo-cartao .tribo-form {
	padding: var(--e-5);
}

html .tribo-cartao__corpo {
	padding: var(--e-5) var(--e-5) var(--e-4);
}

html .tribo-cartao .tribo-aba {
	padding: 13px 12px;
}

html .tribo-cartao__selo {
	margin-bottom: var(--e-3);
}

html .tribo-cartao__titulo {
	margin-bottom: 6px;
}

html .tribo-cartao__lead {
	margin-bottom: var(--e-4);
	font-size: 13.5px;
}

/* A trilha de dois passos custava cerca de 50px para dizer o que
   o proprio botao "Continuar" ja diz. Com tres campos visiveis,
   ela e mais ruido que orientacao -- no cartao. Na pagina
   dedicada, onde o formulario e o assunto, ela continua. */
html .tribo-cartao .tribo-trilha {
	display: none;
}

html .tribo-cartao .tribo-field {
	margin-bottom: var(--e-3);
}

html .tribo-cartao .tribo-field label {
	margin-bottom: 4px;
	font-size: 13.5px;
}

html .tribo-cartao .tribo-field input[type="date"],
html .tribo-cartao .tribo-field input[type="time"],
html .tribo-cartao .tribo-field input[type="text"] {
	padding: 10px 40px 10px 13px;
}

html .tribo-cartao .tribo-form .tribo-button {
	padding: 13px 20px;
}

/* ============================================================
   Heroi -- a fotografia do cliente
   ------------------------------------------------------------
   Substitui a generica. Ceu claro a esquerda, onde fica o
   titulo; a pessoa cai entre a coluna de texto e o cartao, e o
   sol fica atras do cartao branco.

   O veu da esquerda ficou mais leve que o anterior: esta foto ja
   e clara desse lado, e o veu antigo apagava a paisagem.
   ============================================================ */

html .elementor-element-22378d4 {
	background-color: #E7E2D9;
	background-image:
		linear-gradient(94deg, rgba(252,250,247,.93) 0%, rgba(252,250,247,.80) 24%, rgba(252,250,247,.34) 48%, rgba(252,250,247,.04) 70%, rgba(252,250,247,0) 100%),
		url("/wp-content/uploads/tribo/heroi-tribo.webp");
	background-size: cover, cover;
	background-position: center, center 42%;
	background-repeat: no-repeat, no-repeat;
}

@media (max-width: 900px) {
	html .elementor-element-22378d4 {
		background-image:
			linear-gradient(180deg, rgba(252,250,247,.94) 0%, rgba(252,250,247,.84) 40%, rgba(252,250,247,.52) 72%, rgba(252,250,247,.32) 100%),
			url("/wp-content/uploads/tribo/heroi-tribo.webp");
	}

	html .elementor > .e-con.elementor-element-22378d4 {
		padding-top: var(--e-6);
		padding-bottom: var(--e-6);
	}

	html .elementor-element-22378d4 .elementor-heading-title {
		font-size: 34px;
	}
}

/* ============================================================
   Heroi -- telas baixas
   ------------------------------------------------------------
   Caber em 1280x860 nao basta. Medido em 1000x700, que e o que
   sobra num notebook de 1366x768 depois da barra do navegador:
   o heroi ia a 841px e o botao a 735 -- de novo abaixo da dobra,
   o problema que esta correcao inteira existe para resolver.

   Entao a compressao responde a ALTURA da janela, nao a largura.
   Quanto mais baixa a tela, menos respiro e menos texto de
   apoio -- o formulario e o botao nunca saem.
   ============================================================ */

@media (min-width: 901px) and (max-height: 820px) {
	html .elementor > .e-con.elementor-element-22378d4 {
		padding-top: 14px;
		padding-bottom: 24px;
	}

	html .elementor-element-22378d4 .elementor-heading-title {
		font-size: 38px;
	}

	/* A linha de apoio do cartao repete o que o titulo dele ja
	   diz. Numa tela baixa, o botao vale mais que a repeticao. */
	html .tribo-cartao__lead {
		display: none;
	}

	html .tribo-cartao__selo {
		margin-bottom: 10px;
	}

	html .tribo-cartao__titulo {
		margin-bottom: 12px;
	}

	html .tribo-cartao .tribo-aba {
		padding: 11px 12px;
	}

	html .tribo-cartao .tribo-field {
		margin-bottom: 10px;
	}
}

@media (min-width: 901px) and (max-height: 700px) {
	html .elementor > .e-con.elementor-element-22378d4 {
		padding-top: 8px;
		padding-bottom: 8px;
	}

	html .elementor-element-22378d4 .elementor-heading-title {
		font-size: 33px;
	}

	html .tribo-cartao__corpo {
		padding: var(--e-4) var(--e-5) var(--e-4);
	}

	html .tribo-cartao .tribo-form {
		padding: var(--e-4) var(--e-5) var(--e-5);
	}

	html .tribo-cartao .tribo-field input[type="date"],
	html .tribo-cartao .tribo-field input[type="time"],
	html .tribo-cartao .tribo-field input[type="text"] {
		padding-block: 8px;
	}

	html .tribo-cartao .tribo-form .tribo-button {
		padding: 11px 20px;
	}

	/* Os cartoes de prova ficam na coluna da esquerda e nao
	   decidem a altura, mas numa tela baixa eles empurram o
	   titulo para cima do cabecalho. */
	html .tribo-prova {
		display: none;
	}
}

/* ============================================================
   Topo -- a chamada principal
   ------------------------------------------------------------
   O site tem um objetivo so, e o cabecalho reconstruido ficou
   com busca e conta: dois utilitarios e nenhuma acao. Numa
   pagina interna nao havia caminho de volta para a conversao
   sem abrir o menu.
   ============================================================ */

.tribo-topo__cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-right: var(--e-2);
	padding: 0 18px;
	border-radius: var(--r-pill);
	background: var(--azul);
	color: #fff;
	font-size: var(--t-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 74, 173, .26);
	transition: background var(--transicao), box-shadow var(--transicao);
}

/* Login do aluno: mesma familia da busca e da conta, e nao da fila do
   menu. Contornado e nao solido, para nao competir com a chamada
   principal, que e a acao que o site quer. */
.tribo-topo__aluno {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-right: var(--e-2);
	padding: 0 14px;
	border-radius: var(--r-pill);
	color: var(--acao);
	font-size: var(--t-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: inset 0 0 0 1px var(--linha);
	transition: background var(--transicao), box-shadow var(--transicao);
}

.tribo-topo__aluno:hover,
.tribo-topo__aluno:focus-visible {
	background: var(--acao-tenue);
	box-shadow: inset 0 0 0 1px rgba(0, 74, 173, .28);
}

.tribo-topo__aluno-curto { display: none; }

.tribo-topo__cta:hover {
	background: var(--tinta);
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 74, 173, .32);
}

.tribo-topo__cta-curto { display: none; }

/* ============================================================
   Alvos de toque
   ------------------------------------------------------------
   Medido em 375px: 25 alvos abaixo de 44x44. O pior era a caixa
   "Nao sei a hora exata", com 13x13 -- alvo que erra mais do
   que acerta com o polegar.

   A area clicavel cresce sem inchar o desenho: o rotulo inteiro
   vira alvo, e os links de lista ganham altura pelo padding em
   vez de por fonte maior.
   ============================================================ */

@media (max-width: 980px) {
	/* O rotulo inteiro do checkbox e o alvo, nao so o quadradinho. */
	.tribo-field--check label,
	html .tribo-cartao .tribo-field--check label {
		min-height: 44px;
		align-items: center;
	}

	.tribo-field--check input[type="checkbox"],
	html .tribo-cartao .tribo-field--check input {
		width: 20px;
		height: 20px;
		flex: 0 0 auto;
	}

	/* Links de lista: altura por respiro, nao por corpo de fonte. */
	.tribo-rodape__colunas li a,
	.tribo-rodape__contato li a,
	.tribo-rodape__legais a,
	.tribo-rodape__redes a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.tribo-rodape__colunas li,
	.tribo-rodape__contato li {
		margin-bottom: 0;
	}

	/* O botao do grupo continua escondido nesta faixa: os itens dele
	   ja aparecem soltos na linha, e mostrar os dois duplica o menu. */
	.tribo-topo__lista a,
	.tribo-topo__sub a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.tribo-topo__conta,
	.tribo-topo__busca > summary,
	.tribo-topo__cta {
		width: 44px;
		height: 44px;
		min-height: 44px;
	}

	/* A chamada continua sendo texto, entao ela nao vira circulo. */
	.tribo-topo__cta {
		width: auto;
		padding: 0 16px;
	}

	.tribo-topo__cta-longo { display: none; }
	.tribo-topo__cta-curto { display: inline; }

	.tribo-topo__aluno {
		padding: 0 12px;
	}

	.tribo-topo__aluno-longo { display: none; }
	.tribo-topo__aluno-curto { display: inline; }
}

/* Nao havia rolagem horizontal para animar aqui: a lista dos
   modulos animava padding-left no hover, que e propriedade de
   layout e forca recalculo a cada quadro. transform faz o mesmo
   deslocamento sem tocar no layout. */
.tribo-modulo li a {
	transition: color var(--transicao), transform var(--transicao);
}

.tribo-modulo li a:hover {
	transform: translateX(3px);
}

/* ============================================================
   Topo -- largura propria
   ------------------------------------------------------------
   O cabecalho herdava os 1080px de largura de leitura do corpo
   da pagina. Barra de topo nao e coluna de texto: com a chamada
   principal somada aos icones, sobravam 469px para a navegacao
   e ela quebrava em duas linhas -- 92px de cabecalho viravam
   115, e o heroi descia junto.
   ============================================================ */

.elementor-location-header .e-con,
.elementor-location-header .e-con-inner {
	--content-width: 1400px;
	max-width: none;
}

.tribo-topo {
	max-width: 1400px;
	gap: var(--e-5);
}

/* Uma linha so, sempre: se a largura apertar, o menu prefere
   apertar o proprio respiro a quebrar. */
.tribo-topo__lista {
	flex-wrap: nowrap;
}

@media (min-width: 981px) and (max-width: 1180px) {
	.tribo-topo__lista a,
	.tribo-topo__grupo {
		padding-inline: 8px;
	}

	.tribo-topo {
		gap: var(--e-3);
	}
}

/* ============================================================
   Primitivo: o formulario de busca
   ------------------------------------------------------------
   Ele aparece em tres lugares -- topo, rodape e pagina de
   resultados -- e estava declarado tres vezes, quase igual. A
   copia cobrou o preco de sempre: o botao do topo saiu sem
   transicao e sem estado de hover, porque o bloco foi copiado
   pela metade. Ninguem percebe isso lendo tres blocos parecidos
   em arquivos de 2.600 linhas; percebe-se juntando os tres.

   Definido uma vez, com os call sites agrupados no seletor. Nao
   muda marcacao nenhuma: cada seletor da lista mantem a propria
   especificidade, entao o que ja funcionava continua vencendo
   quem precisava vencer.

   So o que difere de verdade fica como ajuste local abaixo.
   ============================================================ */

.tribo-topo__busca input,
.tribo-rodape__busca input,
.tribo-busca-pagina__form input {
	padding: 10px 12px;
	border: 1px solid var(--linha);
	border-radius: var(--r);
	background: var(--branco);
	color: var(--tinta);
	font: inherit;
	font-size: var(--t-sm);
}

.tribo-topo__busca input::placeholder,
.tribo-rodape__busca input::placeholder,
.tribo-busca-pagina__form input::placeholder {
	color: var(--silencio);
}

.tribo-topo__busca input:focus-visible,
.tribo-rodape__busca input:focus-visible,
.tribo-busca-pagina__form input:focus-visible {
	outline: 2px solid var(--azul);
	outline-offset: 1px;
	border-color: var(--azul);
}

.tribo-topo__busca button,
.tribo-rodape__busca button,
.tribo-busca-pagina__form button {
	padding: 10px 16px;
	border: 0;
	border-radius: var(--r);
	background: var(--azul);
	color: #fff;
	font: inherit;
	font-size: var(--t-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--transicao);
}

.tribo-topo__busca button:hover,
.tribo-rodape__busca button:hover,
.tribo-busca-pagina__form button:hover {
	background: var(--tinta);
}

/* ---- o que cada lugar tem de proprio ---- */

/* No topo o campo abre num painel flutuante e nao divide linha
   com nada, entao tem largura fixa em vez de crescer. */
.tribo-topo__busca input {
	width: 240px;
}

/* Nos outros dois o campo divide a linha com o botao. */
.tribo-rodape__busca input,
.tribo-busca-pagina__form input {
	flex: 1;
	min-width: 0;
}

/* Na pagina de resultados a busca e o assunto da tela, nao um
   utilitario de canto: cabe mais respiro. */
.tribo-busca-pagina__form input {
	padding: 12px 14px;
}

.tribo-busca-pagina__form button {
	padding: 12px 20px;
}

/* ============================================================
   O sistema da pagina
   ------------------------------------------------------------
   Auditado em 01/09/2026, depois de o cliente dizer pela quarta
   vez que o site estava feio. As tres vezes anteriores eu
   respondi com mais CSS. A medicao mostrou por que nao adiantava:
   cada componente estava certo por dentro e o sistema da pagina
   inteira tinha derivado.

     Fundos: cinco tons quase iguais -- #FFFFFF, #FCFAF7,
     #F6F1EA, #F4F7FC, #E9F0F7 -- distribuidos sem padrao. Quatro
     brancos-sujos diferentes nao leem como alternancia
     deliberada; leem como sujeira.

     Titulos de secao: 36, 38 e 44px para o mesmo papel. E os de
     44 empatavam com o h1 do heroi, achatando a hierarquia --
     nada parecia mais importante que outra coisa.
   ============================================================ */

/* ---- 1. Duas superficies, alternadas ---- */

/* Sobre especificidade, porque a primeira tentativa perdeu:
   o Elementor gera

     .elementor-48 .elementor-element.elementor-element-XXX
       :not(.elementor-motion-effects-element-type-background)

   que vale 0,4,0 -- o :not() conta o argumento. Uma regra com
   html + tres classes vale 0,3,1 e perde. Encadear as classes
   que o container ja carrega (e-con, e-flex, e-parent) chega a
   0,5,1 sem precisar de !important.

   As duas secoes escuras ficam: a roda do ceu e o fecho. Elas
   sao a pontuacao da pagina, e a roda desenha o proprio disco
   claro por cima. Alternancia entre elas: leite, branco, leite,
   branco, ESCURO, branco, leite, branco, ESCURO. */

html .elementor .e-con.e-flex.e-parent.elementor-element-087583e,
html .elementor .e-con.e-flex.e-parent.elementor-element-c498083 {
	background-color: var(--leite);
}

html .elementor .e-con.e-flex.e-parent.elementor-element-02fa22e,
html .elementor .e-con.e-flex.e-parent.elementor-element-d18b7a9 {
	background-color: var(--branco);
}

/* ---- 2. Uma escala de titulo ---- */

/* O h1 do heroi tem 44px. Um titulo de secao com os mesmos 44
   nao e hierarquia, e empate: nada parece mais importante que
   outra coisa. 34 abre um degrau visivel.

   Os dois ultimos precisam do alvo por widget porque o Elementor
   grava tipografia por elemento, com a mesma especificidade
   alta de antes. */

html .elementor h2.elementor-heading-title,
html .tribo-signos-titulo,
html .tribo-ceu__titulo,
html .tribo-secao-titulo,
html .elementor .elementor-element.elementor-element-8ad162b .elementor-heading-title,
html .elementor .elementor-element.elementor-element-ac8f5cd .elementor-heading-title {
	font-size: 34px;
	line-height: 1.2;
}

@media (max-width: 860px) {
	html .elementor h2.elementor-heading-title,
	html .tribo-signos-titulo,
	html .tribo-ceu__titulo,
	html .tribo-secao-titulo,
	html .elementor .elementor-element.elementor-element-8ad162b .elementor-heading-title,
	html .elementor .elementor-element.elementor-element-ac8f5cd .elementor-heading-title {
		font-size: 27px;
	}
}

/* ---- 3. Sem eyebrow ---- */

/* Rotulo em maiusculas acima do titulo promete secao importante
   e nao entrega informacao nenhuma. O titulo carrega o proprio
   peso, e a referencia aprovada pelo cliente nao tinha nenhum. */

html .elementor .elementor-element.elementor-element-2026d51,
html .tribo-abertura__rotulo {
	display: none;
}

/* ---- 4. Titulo nao e link ---- */

/* Dois titulos de secao estavam no azul #004AAD, que neste
   sistema e a cor do que se clica. Titulo azul compete com os
   links da pagina e tira forca do botao, que e o unico lugar
   onde o azul deveria chamar. Voltam para a tinta, como os
   outros trinta e dois titulos do site. */

html .elementor .elementor-element.elementor-element-8e2a1cb .elementor-heading-title,
html .elementor .elementor-element.elementor-element-8ad162b .elementor-heading-title {
	color: var(--titulo);
}

/* ============================================================
   Icones desenhados no lugar dos glifos
   ------------------------------------------------------------
   As faixas usavam dingbats do Unicode -- sol, lua, flor, losango,
   infinito -- como se fossem icones. Eles nao formam sistema: cada
   um vem de uma fonte diferente, com peso, tamanho optico e
   alinhamento proprios, e o topo do site ja usa SVG desenhado em
   traco de 1,7. A diferenca entre as duas coisas se ve.

   Os doze glifos dos signos ficam. Aqueles nao sao substituto de
   icone: sao o simbolo real do assunto, e trocar por desenho
   nosso seria inventar notacao onde ja existe uma.

   Feito com mask e nao com background-image: assim o icone toma a
   cor que o chip ja tem (currentColor), e nao preciso repetir
   oito cores de chakra aqui so para colorir desenho.
   ============================================================ */

.tribo-atalho__marca,
.tribo-modulo__marca {
	position: relative;
	font-size: 0;
}

.tribo-atalho__marca::before,
.tribo-modulo__marca::before {
	content: "";
	display: block;
	width: 21px;
	height: 21px;
	background-color: currentColor;
	-webkit-mask: var(--icone) no-repeat center / contain;
	mask: var(--icone) no-repeat center / contain;
}

.tribo-modulo__marca::before {
	width: 22px;
	height: 22px;
}

/* Sol: o mapa natal e o ceu de um instante. */
[href*="mapa-astral-gratis"] .tribo-atalho__marca,
.tribo-modulo--astro .tribo-modulo__marca {
	--icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.6v2.4M12 19v2.4M2.6 12h2.4M19 12h2.4M5.4 5.4l1.7 1.7M16.9 16.9l1.7 1.7M18.6 5.4l-1.7 1.7M7.1 16.9l-1.7 1.7'/%3E%3C/svg%3E");
}

/* Lua: o horoscopo le o ceu de hoje. */
[href*="horoscopo"] .tribo-atalho__marca {
	--icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.2A8.4 8.4 0 0 1 9.8 4 8.6 8.6 0 1 0 20 14.2z'/%3E%3C/svg%3E");
}

/* Calendario: o mapa do ano abre no aniversario. */
[href*="mapa-do-ano"] .tribo-atalho__marca {
	--icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3.2' y='5' width='17.6' height='16' rx='2.2'/%3E%3Cpath d='M3.2 10h17.6M8 3v4M16 3v4'/%3E%3Ccircle cx='12' cy='15.4' r='1.5' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

/* Duas pessoas: sinastria e o que acontece entre dois mapas. */
[href*="sinastria"] .tribo-atalho__marca {
	--icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='8.6' cy='8.4' r='3.2'/%3E%3Ccircle cx='16' cy='9.6' r='2.6'/%3E%3Cpath d='M2.8 19.6c0-3.1 2.6-5.2 5.8-5.2s5.8 2.1 5.8 5.2'/%3E%3Cpath d='M16.2 14.6c2.8.2 5 2.2 5 5'/%3E%3C/svg%3E");
}

/* Cartas: o taro e um baralho, nao um oraculo abstrato. */
.tribo-modulo--taro .tribo-modulo__marca {
	--icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='4.4' width='9.6' height='14' rx='1.8'/%3E%3Cpath d='M6.6 6.8 4 8.1a1.8 1.8 0 0 0-.8 2.4l4.4 8.6'/%3E%3C/svg%3E");
}

/* Grade de pontos: numerologia trabalha numero, nao simbolo. */
.tribo-modulo--num .tribo-modulo__marca {
	--icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='6.4' cy='6.4' r='1.7'/%3E%3Ccircle cx='12' cy='6.4' r='1.7'/%3E%3Ccircle cx='17.6' cy='6.4' r='1.7'/%3E%3Ccircle cx='6.4' cy='12' r='1.7'/%3E%3Ccircle cx='12' cy='12' r='1.7'/%3E%3Ccircle cx='17.6' cy='12' r='1.7'/%3E%3Ccircle cx='6.4' cy='17.6' r='1.7'/%3E%3Ccircle cx='12' cy='17.6' r='1.7'/%3E%3Ccircle cx='17.6' cy='17.6' r='1.7'/%3E%3C/svg%3E");
}

/* Livro aberto: os textos. */
.tribo-modulo--texto .tribo-modulo__marca {
	--icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.6C10.4 5.3 8.4 4.7 5.2 4.7A1.2 1.2 0 0 0 4 5.9v11.4a1.2 1.2 0 0 0 1.2 1.2c3.2 0 5.2.6 6.8 1.9 1.6-1.3 3.6-1.9 6.8-1.9a1.2 1.2 0 0 0 1.2-1.2V5.9a1.2 1.2 0 0 0-1.2-1.2c-3.2 0-5.2.6-6.8 1.9z'/%3E%3Cpath d='M12 6.6v13.8'/%3E%3C/svg%3E");
}

/* ---- 5. As provas do heroi ---- */

/* Estavam desenhadas como pilula -- inline-flex, canto totalmente
   arredondado, ponto colorido ao lado -- que e a forma de um
   rotulo curto. O conteudo e uma frase inteira: titulo em negrito
   mais uma explicacao. Resultado medido a 1280: cada "pilula"
   ocupava os 611px da coluna com tres linhas, e o flex separava o
   negrito do resto em duas colunas rigidas de 108 e 400px, com o
   titulo quebrando no meio ("Calculo proprio, / nao tabela /
   pronta.").

   Flex nao serve para texto que deve fluir. Vira bloco, com o
   ponto pendurado a esquerda e a frase correndo inteira. O fundo
   claro fica: ele e o que segura a leitura sobre a fotografia.
   ============================================================ */

html .tribo-provas {
	display: grid;
	gap: 7px;
	max-width: 560px;
}

html .tribo-prova {
	display: block;
	position: relative;
	padding: 10px 18px 10px 33px;
	border-radius: var(--r);
	font-size: 14px;
	line-height: 1.5;
}

html .tribo-prova::before {
	position: absolute;
	left: 15px;
	top: 1.02em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

html .tribo-prova strong {
	display: inline;
	font-weight: 600;
}

/* ============================================================
   Ritmo vertical
   ------------------------------------------------------------
   Nove secoes com respiro identico de 96/96. Todas respiram
   igual, entao nada e enfatizado e nada e comprimido -- a
   pagina tem batida de metronomo, que le como template e nao
   como composicao.

   Medida a densidade de cada uma (area ocupada por conteudo
   sobre area da secao), o desperdicio ficou obvio:

     fecho "Seu mapa leva dois minutos"  563px a  6% de densidade
     "Tres dimensoes, uma pessoa"        793px a 19%
     areas da vida                       440px a 25%
     numeros                             458px

   Secao vazia com respiro grande nao parece calma; parece
   inacabada. Quem tem conteudo denso mantem os 96. Quem tem
   pouco encolhe, e a diferenca entre as duas vira ritmo.
   ============================================================ */

html .elementor > .e-con.e-flex.elementor-element-9469cea,   /* tres dimensoes */
html .elementor > .e-con.e-flex.elementor-element-4e8f100 {  /* fecho */
	padding-top: 64px;
	padding-bottom: 64px;
}

html .elementor > .e-con.e-flex.elementor-element-087583e,   /* areas da vida */
html .elementor > .e-con.e-flex.elementor-element-d18b7a9 {  /* numeros */
	padding-top: 56px;
	padding-bottom: 56px;
}

/* ============================================================
   A paleta aparecendo
   ------------------------------------------------------------
   Medido: 15,4% da area da pagina carrega cor de marca. Os
   outros 84,6% sao branco, creme, tinta e navy. Para uma
   identidade que se define por azul mais sete cores de chakra
   nos destaques, a paleta praticamente nao existe na tela --
   e e isso que faz o site parecer generico e apagado.

   O aumento e cirurgico, nao geral: as cores entram onde a
   pagina esta mais vazia e onde ja ha estrutura para recebe-las.
   A direcao continua sendo paz, entao nada satura: sao tintas
   claras da propria paleta, com o texto na versao legivel.
   ============================================================ */

/* As areas da vida eram sete pilulas cinzas identicas. Cada uma
   e um assunto diferente; ganham a cor do chakra correspondente
   e a secao deixa de ser um vazio de 440px. */
.tribo-areas__lista > li:nth-child(7n+1) .tribo-area { --tinta: #E9EEF8; --letra: #2C5182; }
.tribo-areas__lista > li:nth-child(7n+2) .tribo-area { --tinta: #FBEDDD; --letra: #9D5D1E; }
.tribo-areas__lista > li:nth-child(7n+3) .tribo-area { --tinta: #E5F1EA; --letra: #35784F; }
.tribo-areas__lista > li:nth-child(7n+4) .tribo-area { --tinta: #F0E8F6; --letra: #6E4F92; }
.tribo-areas__lista > li:nth-child(7n+5) .tribo-area { --tinta: #FDEAEA; --letra: #B03A36; }
.tribo-areas__lista > li:nth-child(7n+6) .tribo-area { --tinta: #E6F2F7; --letra: #2B7393; }
.tribo-areas__lista > li:nth-child(7n+7) .tribo-area { --tinta: #F7E9F2; --letra: #94437B; }

html .tribo-area {
	border-color: transparent;
	background: var(--tinta, var(--branco));
	color: var(--letra, var(--texto));
	font-weight: 500;
}

html .tribo-area:hover {
	background: var(--letra, var(--azul));
	color: #fff;
	transform: translateY(-2px);
}

/* Os numeros eram tres azuis identicos sobre branco. Sao tres
   fatos diferentes; cada um leva uma cor da paleta, o que
   tambem impede que os tres se leiam como um so bloco. */
html .tribo-numeros .tribo-numero:nth-child(1) .tribo-numero__v { color: #2C5182; }
html .tribo-numeros .tribo-numero:nth-child(2) .tribo-numero__v { color: #6E4F92; }
html .tribo-numeros .tribo-numero:nth-child(3) .tribo-numero__v { color: #35784F; }

/* O halo de cor dos signos estava em 10% de opacidade: presente
   no codigo, invisivel na tela. */
html .tribo-signo::before {
	opacity: .16;
}

html .tribo-signo:hover::before {
	opacity: .26;
}

/* A barra de chakra dos pilares tinha 40px de largura num
   cartao de 340. Vira a largura inteira do topo: mesma
   linguagem, presenca de verdade. */
html .tribo-pilar::before {
	left: 0;
	width: 100%;
	height: 3px;
	border-radius: 0;
}

/* Consequencia direta da troca de fundos acima: texto em
   --silencio (#6B7280) passava com folga no branco e cai para
   4,30 sobre o creme, abaixo dos 4,5 exigidos. Onde a secao
   virou creme, o texto secundario sobe um degrau de tinta.
   Mesma correcao ja feita no rodape pelo mesmo motivo. */

html .tribo-areas__titulo,
html .tribo-blog__subtitulo {
	color: var(--texto);
}

/* ============================================================
   "O que voce encontra aqui" -- proporcao
   ------------------------------------------------------------
   Comparado com a referencia do cliente: a secao equivalente do
   Personare resolve 22 destinos em 748px. A nossa gastava 1.108
   em quatro cartoes.

   A causa e proporcao, nao gosto: 252px de largura por 554 de
   altura e quase 1:2,2 -- le como coluna estreita, nao como
   cartao. E a altura vem de fora do conteudo, porque a grade
   estica todos ate o mais alto (Astrologia, com seis links).

   Entao o corte e no que estica: respiro do cartao e altura de
   cada linha de link. Nenhum link sai.
   ============================================================ */

html .tribo-modulo {
	padding: 22px 20px;
}

html .tribo-modulo li a {
	padding: 7px 0;
}

html .tribo-modulo__nome,
html .tribo-modulo h3 {
	margin-bottom: 6px;
}

html .tribo-modulo p {
	margin-bottom: 14px;
	font-size: 13.5px;
	line-height: 1.5;
}

html .tribo-modulos {
	gap: var(--e-4);
}

/* ============================================================
   Trilho horizontal
   ------------------------------------------------------------
   O layout do portal de referencia, medido: a secao de produtos
   dele resolve 22 destinos em 748px. A nossa gastava 1.022 em
   quatro cartoes, porque empilhava na vertical e dava a cada um
   um paragrafo e uma lista de links.

   Aqui a fileira rola. Cabe o catalogo inteiro sem a pagina
   crescer, e um produto novo passa a custar zero de altura.
   Sem JavaScript: overflow com scroll-snap.
   ============================================================ */

.tribo-trilho-secao {
	margin-block: var(--e-6);
}

/* Rotulo de prateleira, nao titulo de capitulo: caixa alta, a
   esquerda, com filete. Custa ~50px onde o titulo grande
   centralizado custava ~150. */
.tribo-trilho__rotulo {
	display: flex;
	align-items: center;
	gap: var(--e-4);
	margin-bottom: var(--e-5);
	font-family: var(--fonte-texto);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--titulo);
}

.tribo-trilho__rotulo::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--linha);
}

.tribo-trilho {
	display: flex;
	gap: var(--e-4);
	margin: 0;
	padding: 0 0 var(--e-4);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximate;
	scrollbar-width: thin;
	scrollbar-color: var(--linha) transparent;
}

.tribo-trilho::-webkit-scrollbar { height: 6px; }
.tribo-trilho::-webkit-scrollbar-track { background: transparent; }
.tribo-trilho::-webkit-scrollbar-thumb {
	background: var(--linha);
	border-radius: 3px;
}

.tribo-trilho__item {
	flex: 0 0 186px;
	scroll-snap-align: start;
}

.tribo-trilho__item a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.tribo-trilho__foto {
	display: block;
	overflow: hidden;
	margin-bottom: var(--e-3);
	border-radius: var(--r-lg);
	background: var(--leite);
	aspect-ratio: 4 / 3;
}

.tribo-trilho__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transicao);
}

.tribo-trilho__item a:hover .tribo-trilho__foto img {
	transform: scale(1.04);
}

.tribo-trilho__nome {
	display: block;
	margin-bottom: 2px;
	font-family: var(--fonte-titulo);
	font-size: 17px;
	line-height: 1.25;
	color: var(--titulo);
}

.tribo-trilho__item a:hover .tribo-trilho__nome {
	color: var(--azul);
}

.tribo-trilho__linha {
	display: block;
	font-size: 13px;
	line-height: 1.45;
	color: var(--texto);
}

.tribo-trilho__item a:focus-visible {
	outline: 2px solid var(--azul);
	outline-offset: 3px;
	border-radius: var(--r-lg);
}

@media (max-width: 560px) {
	.tribo-trilho__item { flex-basis: 156px; }
}

/* ============================================================
   Fileira editorial
   ------------------------------------------------------------
   Mesmo tratamento do trilho, aplicado aos textos da home. Os
   cartoes tinham 339x522 numa grade de tres; a fileira editorial
   da referencia usa itens de 268x179 num carrossel, e cabe oito
   onde a nossa cabia tres.

   Assinatura do autor e resumo saem daqui e continuam na pagina
   /blog/, onde a lista e o assunto e ha espaco para eles. No
   home o que decide o clique e a capa e o titulo.
   ============================================================ */

/* O respiro do trilho: 96px em cima e embaixo para 343 de
   conteudo era mais moldura que quadro. */
html .elementor > .e-con.e-flex.elementor-element-1b4ab8f {
	padding-top: 48px;
	padding-bottom: 48px;
}

.tribo-blog-home .tribo-grade--3,
.tribo-secao--blog .tribo-grade--3 {
	display: flex;
	gap: var(--e-4);
	overflow-x: auto;
	scroll-snap-type: x proximate;
	padding-bottom: var(--e-4);
	scrollbar-width: thin;
	scrollbar-color: var(--linha) transparent;
}

.tribo-blog-home .tribo-post,
.tribo-secao--blog .tribo-post {
	flex: 0 0 266px;
	scroll-snap-align: start;
}

/* Capa mais baixa: 4/3 em 266px da 200px, contra os 240 de antes. */
.tribo-blog-home .tribo-post__capa,
.tribo-secao--blog .tribo-post__capa {
	aspect-ratio: 4 / 3;
}

/* O que nao decide o clique na home. */
.tribo-blog-home .tribo-post__resumo,
.tribo-secao--blog .tribo-post__resumo,
.tribo-blog-home .tribo-post__assinatura,
.tribo-secao--blog .tribo-post__assinatura {
	display: none;
}

.tribo-blog-home .tribo-post__titulo,
.tribo-secao--blog .tribo-post__titulo {
	font-size: 17px;
	line-height: 1.3;
}

/* ============================================================
   Rotulo de prateleira nas secoes de catalogo
   ------------------------------------------------------------
   Medido: a grade dos signos ocupa 317px numa secao de 891. Os
   pilares, 202 numa de 728. O conteudo nao e o que infla -- e o
   bloco de titulo: titulo grande centralizado mais subtitulo
   centralizado custam ~150px onde o rotulo de prateleira da
   referencia custa ~50.

   A distincao segue a mesma da referencia: secao que lista
   coisas ganha rotulo; secao que argumenta mantem titulo. O
   heroi e o fecho continuam com voz de titulo.
   ============================================================ */

html .tribo-signos-titulo,
html .tribo-secao-titulo--centro {
	display: flex;
	align-items: center;
	gap: var(--e-4);
	margin-bottom: var(--e-4);
	font-family: var(--fonte-texto);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: left;
	color: var(--titulo);
}

html .tribo-signos-titulo::after,
html .tribo-secao-titulo--centro::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--linha);
}

/* O subtitulo centralizado abaixo do titulo era a segunda
   metade do mesmo custo. Numa prateleira, o rotulo basta. */
html .tribo-signos-lead,
html .tribo-blog__subtitulo {
	display: none;
}

html .elementor > .e-con.e-flex.elementor-element-02fa22e,
html .elementor > .e-con.e-flex.elementor-element-c498083 {
	padding-top: 48px;
	padding-bottom: 48px;
}

/* O corpo do cartao de texto tinha 252px para categoria, titulo
   e meta. Numa fileira, isso e o dobro do necessario. */
html .tribo-blog-home .tribo-post__corpo {
	padding: var(--e-4) var(--e-4) var(--e-5);
}

html .tribo-blog-home .tribo-post__meta,
html .tribo-blog-home .tribo-post__tempo {
	font-size: 12px;
}

/* ============================================================
   Horoscopo do dia
   ------------------------------------------------------------
   O indice mostra os doze com o tom de hoje; cada signo tem
   endereco proprio em /horoscopo/<signo>/.

   A faixa "o ceu de hoje" repete a posicao bruta da Lua e do
   Sol. E o que separa isto de frase pronta: da para conferir em
   qualquer efemeride e bater. Ela e discreta de proposito --
   prova, nao ornamento.
   ============================================================ */

.tribo-horo__ceu {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px var(--e-5);
	margin-bottom: var(--e-6);
	padding: var(--e-4) var(--e-5);
	border-radius: var(--r);
	background: var(--leite);
	font-size: var(--t-sm);
	color: var(--texto);
}

.tribo-horo__ceu-rotulo {
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--titulo);
}

.tribo-horo__ceu strong {
	color: var(--titulo);
	font-weight: 600;
}

/* ---- indice ---- */

.tribo-horo__grade {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--e-4);
	margin: 0 0 var(--e-7);
	padding: 0;
	list-style: none;
}

.tribo-horo__item a {
	display: block;
	height: 100%;
	padding: var(--e-5);
	border: 1px solid var(--linha);
	border-radius: var(--r-lg);
	background: var(--branco);
	text-decoration: none;
	transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}

.tribo-horo__item a:hover {
	border-color: var(--azul);
	box-shadow: 0 6px 20px rgba(9, 24, 46, .08);
	transform: translateY(-1px);
}

.tribo-horo__glifo {
	display: block;
	margin-bottom: 4px;
	font-size: 26px;
	line-height: 1;
}

.tribo-horo__item--fogo  .tribo-horo__glifo { color: var(--chakra-raiz-texto); }
.tribo-horo__item--terra .tribo-horo__glifo { color: var(--chakra-cardiaco-texto); }
.tribo-horo__item--ar    .tribo-horo__glifo { color: var(--chakra-sacral-texto); }
.tribo-horo__item--agua  .tribo-horo__glifo { color: var(--chakra-laringeo-texto); }

.tribo-horo__nome {
	display: block;
	margin-bottom: 2px;
	font-family: var(--fonte-titulo);
	font-size: var(--t-md);
	color: var(--titulo);
}

.tribo-horo__tom {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	color: var(--texto);
}

/* ---- um signo ---- */

.tribo-horo__abertura {
	margin-bottom: var(--e-6);
	padding-bottom: var(--e-5);
	border-bottom: 1px solid var(--linha);
}

.tribo-horo__glifo-grande {
	display: block;
	margin-bottom: var(--e-2);
	font-size: 52px;
	line-height: 1;
}

.tribo-horo__abertura--fogo  .tribo-horo__glifo-grande { color: var(--chakra-raiz-texto); }
.tribo-horo__abertura--terra .tribo-horo__glifo-grande { color: var(--chakra-cardiaco-texto); }
.tribo-horo__abertura--ar    .tribo-horo__glifo-grande { color: var(--chakra-sacral-texto); }
.tribo-horo__abertura--agua  .tribo-horo__glifo-grande { color: var(--chakra-laringeo-texto); }

.tribo-horo__data {
	margin: 0;
	color: var(--texto);
	font-size: var(--t-sm);
}

/* ---- os cinco blocos de leitura ----

   Hoje, amor, trabalho, semana e mes. Cinco assuntos diferentes,
   e por isso cinco barras de cor diferente -- empilhar cinco
   cartoes identicos faria a pessoa ler o primeiro e rolar. A
   barra a esquerda e mais barata que um cartao: separa sem
   fechar cada bloco numa caixa.
   ---------------------------------------------------------- */

.tribo-horo__blocos {
	display: grid;
	gap: var(--e-6);
	margin-bottom: var(--e-7);
}

/* Cinco blocos em sequencia -- hoje, amor, trabalho, semana, mes --
   e nao cinco opcoes entre as quais escolher. A barra colorida a
   esquerda de cada um sugeria escolha, e barra lateral colorida em
   cartao e o tique mais reconhecivel de interface gerada. O titulo
   ja nomeia cada bloco; o que separa e o filete e o respiro. */
.tribo-horo__bloco {
	max-width: 66ch;
	padding-top: var(--e-5);
	border-top: 1px solid var(--linha);
}

.tribo-horo__bloco:first-child {
	padding-top: 0;
	border-top: 0;
}

.tribo-horo__bloco h2 {
	margin-bottom: var(--e-3);
	font-size: var(--t-lg);
}

.tribo-horo__bloco p {
	margin-bottom: var(--e-3);
	color: var(--texto);
}

.tribo-horo__bloco p:last-child { margin-bottom: 0; }

/* A cor de cada assunto sobrevive no titulo, que e onde ela
   informa: ali ela nomeia, na borda ela so decorava. */
.tribo-horo__bloco--hoje h2     { color: var(--azul); }
.tribo-horo__bloco--amor h2     { color: var(--chakra-cardiaco-texto); }
.tribo-horo__bloco--trabalho h2 { color: var(--chakra-raiz-texto); }
.tribo-horo__bloco--semana h2   { color: var(--chakra-sacral-texto); }
.tribo-horo__bloco--mes h2      { color: var(--chakra-laringeo-texto); }

@media (max-width: 40rem) {
	.tribo-horo__bloco { padding-left: var(--e-4); }
}

.tribo-horo__nota {
	padding: var(--e-6);
	border-radius: var(--r-lg);
	background: var(--leite);
}

.tribo-horo__nota p { max-width: 60ch; color: var(--texto); }
.tribo-horo__nota-fina { font-size: var(--t-sm); margin-bottom: 0; }

.tribo-horo__outros {
	margin-top: var(--e-7);
	padding-top: var(--e-5);
	border-top: 1px solid var(--linha);
}

.tribo-horo__outros-rotulo {
	margin-bottom: var(--e-3);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--titulo);
}

.tribo-horo__outros ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2) var(--e-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tribo-horo__outros a {
	color: var(--texto);
	font-size: var(--t-sm);
	text-decoration: none;
}

.tribo-horo__outros a:hover { color: var(--azul); }

@media (max-width: 860px) {
	.tribo-horo__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Na leitura de um signo, o componente ja emite o h1 ("Horoscopo de
   Aries"). A abertura da pagina emitiria um segundo, e dois h1 na
   mesma pagina e ambiguidade para leitor de tela e para busca. */
body.tribo-um-signo .tribo-abertura {
	display: none;
}

/* ============================================================
   A home aprovada em 02/09/2026
   ------------------------------------------------------------
   O cliente gerou o desenho completo da home e pediu para
   seguir. Ele reverte duas decisoes minhas da vespera -- o
   trilho horizontal e o rotulo de prateleira em caixa alta --
   e nas duas o desenho aprovado manda.

   Fica registrado o que muda, porque e o oposto do que o bloco
   anterior deste arquivo argumenta:

     titulo de secao volta a ser serifado e centralizado, com
     subtitulo centralizado abaixo;
     a secao de caminhos vira grade 2x2 com fotografia grande;
     os textos voltam para grade de tres com resumo;
     o rodape passa a ser azul-noite.
   ============================================================ */

/* ---- 1. Titulo de secao: serifado, centralizado ---- */

html .tribo-signos-titulo,
html .tribo-secao-titulo--centro {
	display: block;
	margin-bottom: var(--e-3);
	font-family: var(--fonte-titulo);
	font-size: 34px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	text-align: center;
	color: var(--titulo);
}

html .tribo-signos-titulo::after,
html .tribo-secao-titulo--centro::after {
	content: none;
}

html .tribo-signos-lead,
html .tribo-blog__subtitulo {
	display: block;
	max-width: 56ch;
	margin: 0 auto var(--e-6);
	text-align: center;
	color: var(--texto);
	font-size: var(--t-md);
}

/* ---- 2. Caminhos: grade 2x2 com fotografia ---- */

.tribo-caminhos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--e-5);
}

.tribo-caminho__link {
	display: block;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--linha);
	border-radius: var(--r-lg);
	background: var(--branco);
	text-decoration: none;
	transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}

.tribo-caminho__link:hover {
	border-color: var(--azul);
	box-shadow: 0 14px 40px rgba(9, 24, 46, .10);
	transform: translateY(-2px);
}

.tribo-caminho__foto {
	display: block;
	overflow: hidden;
	background: var(--leite);
	aspect-ratio: 16 / 9;
}

.tribo-caminho__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transicao);
}

.tribo-caminho__link:hover .tribo-caminho__foto img {
	transform: scale(1.03);
}

.tribo-caminho__corpo {
	display: block;
	padding: var(--e-5) var(--e-5) var(--e-6);
}

.tribo-caminho__titulo {
	display: block;
	margin-bottom: 8px;
	font-family: var(--fonte-titulo);
	font-size: 24px;
	line-height: 1.2;
	color: var(--titulo);
}

.tribo-caminho__texto {
	display: block;
	margin-bottom: var(--e-4);
	max-width: 46ch;
	color: var(--texto);
	font-size: var(--t-sm);
	line-height: 1.6;
}

/* A seta e desenhada em CSS: uma so, consistente com o resto, e
   sem depender de um glifo de fonte que muda de largura optica. */
.tribo-caminho__acao {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--azul);
	font-size: var(--t-sm);
	font-weight: 600;
}

.tribo-caminho__acao::after {
	content: "";
	width: 14px;
	height: 9px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h13M10 1l4 4-4 4'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h13M10 1l4 4-4 4'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform var(--transicao);
}

.tribo-caminho__link:hover .tribo-caminho__acao::after {
	transform: translateX(3px);
}

/* ---- 3. Textos voltam para grade de tres ---- */

html .tribo-blog-home .tribo-grade--3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--e-5);
	overflow: visible;
	padding-bottom: 0;
}

html .tribo-blog-home .tribo-post {
	flex: none;
}

html .tribo-blog-home .tribo-post__resumo {
	display: block;
}

html .tribo-blog-home .tribo-post__titulo {
	font-size: 19px;
}

@media (max-width: 860px) {
	.tribo-caminhos { grid-template-columns: 1fr; }
	html .tribo-blog-home .tribo-grade--3 { grid-template-columns: 1fr; }
}

/* ============================================================
   Rodape em azul-noite
   ------------------------------------------------------------
   O desenho aprovado pede o rodape escuro. Ele fecha a pagina e
   ecoa as duas secoes escuras do meio, entao a pagina deixa de
   terminar dissolvida no creme.

   As cores foram medidas contra #0B1E38 antes de entrar: branco
   da 16,6:1, o azul claro do corpo da 10,3:1. Sobra folga para
   o texto fino do rodape, que e onde esse tipo de peca costuma
   falhar.
   ============================================================ */

.elementor-location-footer {
	border-top: 0;
	background:
		radial-gradient(90% 120% at 15% 0%, rgba(34, 66, 112, .55), rgba(34, 66, 112, 0) 60%),
		#0B1E38;
}

.elementor-location-footer::before {
	background: var(--espectro);
	opacity: .9;
}

html .tribo-rodape__nome {
	color: #fff;
}

html .tribo-rodape__lema,
html .tribo-rodape__contato,
html .tribo-rodape__base {
	color: #C9D6E8;
}

html .tribo-rodape__titulo {
	color: #fff;
}

html .tribo-rodape a {
	color: #C9D6E8;
}

html .tribo-rodape a:hover {
	color: #fff;
}

html .tribo-rodape__base {
	border-top-color: rgba(255, 255, 255, .14);
}

/* O selo de pagamento era um retangulo branco; no escuro ele
   vira um vidro fino, para nao virar mancha. */
html .tribo-rodape__pagamento {
	border-color: rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .06);
	color: #C9D6E8;
}

/* A busca do rodape sobre fundo escuro. */
html .tribo-rodape__busca input {
	border-color: rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

html .tribo-rodape__busca input::placeholder {
	color: #A8BBD4;
}

html .tribo-rodape__busca input:focus-visible {
	outline-color: #fff;
	border-color: rgba(255, 255, 255, .5);
}

html .tribo-rodape__busca button {
	background: #fff;
	color: #0B1E38;
}

html .tribo-rodape__busca button:hover {
	background: #C9D6E8;
	color: #0B1E38;
}

/* ============================================================
   Heroi -- respiro e icones (ajuste de 02/09)
   ------------------------------------------------------------
   O cliente apontou a faixa branca colada no formulario.
   Medido: a folga entre a base do cartao e o topo da faixa era
   exatamente 0px -- uma comecava onde a outra terminava.

   A causa nao era a margem da faixa, e sim nao haver foto
   suficiente abaixo do cartao: sobravam 66px de heroi depois
   dele, e a faixa precisa de espaco livre mais sobreposicao. O
   heroi ganha respiro embaixo, e a faixa sobe menos.
   ============================================================ */

html .elementor > .e-con.elementor-element-22378d4 {
	padding-bottom: 116px;
}

html .tribo-atalhos {
	margin-top: -56px;
}

/* Em tela baixa o heroi ja esta espremido pelas regras de
   altura; ali a faixa quase nao sobrepoe, para nao encostar de
   novo no cartao. */
@media (min-width: 901px) and (max-height: 820px) {
	html .elementor > .e-con.elementor-element-22378d4 {
		padding-bottom: 84px;
	}

	html .tribo-atalhos {
		margin-top: -32px;
	}
}

@media (min-width: 901px) and (max-height: 700px) {
	html .elementor > .e-con.elementor-element-22378d4 {
		padding-bottom: 60px;
	}

	html .tribo-atalhos {
		margin-top: -20px;
	}
}

/* ---- provas em linha unica, com ladrilho de icone ---- */

/* O desenho aprovado mostra tres linhas curtas, cada uma com um
   ladrilho quadrado colorido. Antes eram frases de duas partes
   ocupando tres linhas cada -- o que o cliente chamou de dificil
   de ler. */

html .tribo-provas {
	display: grid;
	gap: 10px;
	max-width: 460px;
	margin-top: var(--e-5);
}

html .tribo-prova {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--tinta);
	font-size: 15px;
	line-height: 1.45;
}

html .tribo-prova::before {
	content: "";
	position: static;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background-color: var(--tinta-icone, #E9EEF8);
	background-image: var(--icone-prova);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}

html .tribo-prova--1 {
	--tinta-icone: #E9EEF8;
	--icone-prova: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C5182' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.8v2.2M12 19v2.2M2.8 12H5M19 12h2.2M5.6 5.6l1.6 1.6M16.8 16.8l1.6 1.6M18.4 5.6l-1.6 1.6M7.2 16.8l-1.6 1.6'/%3E%3C/svg%3E");
}

html .tribo-prova--2 {
	--tinta-icone: #FBEDDD;
	--icone-prova: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239D5D1E' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 6.8V12l3.4 2'/%3E%3C/svg%3E");
}

html .tribo-prova--3 {
	--tinta-icone: #E5F1EA;
	--icone-prova: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335784F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 3.6h11.2a1.4 1.4 0 0 1 1.4 1.4v15.4l-7-4-7 4V5a1.4 1.4 0 0 1 1.4-1.4z'/%3E%3C/svg%3E");
}

/* ---- faixa de produtos: ladrilho quadrado, nao circulo ---- */

html .tribo-atalho__marca {
	width: 40px;
	height: 40px;
	border-radius: 11px;
}

/* ============================================================
   "Seu ceu agora" como cartao embutido
   ------------------------------------------------------------
   No desenho aprovado esta secao nao ocupa a largura toda: e um
   cartao azul-noite de cantos arredondados, respirando dentro de
   uma faixa clara. A diferenca importa -- de ponta a ponta ele
   corta a pagina em duas; embutido, ele e um objeto sobre a
   pagina, que e o que a peca quer dizer (uma roda, um
   instrumento).
   ============================================================ */

html .elementor > .e-con.e-flex.elementor-element-4e69cbb {
	background-color: var(--leite);
	background-image: none;
	padding-top: 56px;
	padding-bottom: 56px;
}

html .tribo-ceu {
	position: relative;
	padding: var(--e-8) var(--e-7);
	border-radius: 22px;
	background:
		radial-gradient(1px 1px at 22% 26%, rgba(255,255,255,.5) 50%, transparent 51%),
		radial-gradient(1px 1px at 68% 16%, rgba(255,255,255,.38) 50%, transparent 51%),
		radial-gradient(1.3px 1.3px at 84% 58%, rgba(255,255,255,.46) 50%, transparent 51%),
		radial-gradient(120% 100% at 20% 0%, #1B3D6B 0%, #0B1E38 58%, #071528 100%);
	background-size: 320px 320px, 420px 420px, 500px 500px, 100% 100%;
	box-shadow: 0 26px 70px rgba(9, 24, 46, .28);
	overflow: hidden;
}

/* ============================================================
   Pilares: ladrilho de icone, como no desenho
   ============================================================ */

html .tribo-pilar {
	padding-top: var(--e-6);
}

html .tribo-pilar__icone {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: var(--e-4);
	border-radius: 11px;
}

html .tribo-pilar__icone svg {
	width: 21px;
	height: 21px;
}

html .tribo-pilar--espirito .tribo-pilar__icone { background: #F0E8F6; color: #6E4F92; }
html .tribo-pilar--mente    .tribo-pilar__icone { background: #E9EEF8; color: #2C5182; }
html .tribo-pilar--corpo    .tribo-pilar__icone { background: #E5F1EA; color: #35784F; }

/* ============================================================
   Numeros: a faixa ganha titulo
   ============================================================ */

html .tribo-numeros-titulo {
	display: block;
	margin-bottom: var(--e-6);
	font-family: var(--fonte-titulo);
	font-size: 30px;
	font-weight: 400;
	text-align: center;
	color: var(--titulo);
}

/* ============================================================
   Escala -- correcao pedida na spec de 02/09
   ------------------------------------------------------------
   A spec diz que a home "nao deve parecer miniaturizada" e da
   os numeros: container 1180-1240, H1 58-68, H2 38-48, secoes
   88-120 de respiro, cartoes com raio 16-22.

   Eu tinha encolhido tudo para caber na dobra: container 1080,
   H1 44, H2 34. Isso resolvia a dobra e criava o problema que a
   spec aponta. A spec e mais recente e diz "heroi ocupando boa
   parte da primeira dobra" -- boa parte, nao inteira. Entao a
   escala volta a crescer, e o botao do formulario continua
   sendo o que precisa estar visivel.
   ============================================================ */

html .elementor > .e-con {
	--content-width: 1200px;
}

.elementor-location-header .e-con,
.elementor-location-header .e-con-inner {
	--content-width: 1400px;
}

html .elementor-element-22378d4 .elementor-heading-title {
	font-size: 60px;
	line-height: 1.06;
	letter-spacing: -0.015em;
}

html .elementor h2.elementor-heading-title,
html .tribo-signos-titulo,
html .tribo-ceu__titulo,
html .tribo-secao-titulo,
html .elementor .elementor-element.elementor-element-8ad162b .elementor-heading-title,
html .elementor .elementor-element.elementor-element-ac8f5cd .elementor-heading-title {
	font-size: 42px;
	line-height: 1.15;
}

html .tribo-numeros-titulo {
	font-size: 38px;
}

/* Respiro de secao na faixa que a spec pede. */
html .elementor > .e-con.e-flex.elementor-element-1b4ab8f,
html .elementor > .e-con.e-flex.elementor-element-02fa22e,
html .elementor > .e-con.e-flex.elementor-element-c498083,
html .elementor > .e-con.e-flex.elementor-element-4e69cbb,
html .elementor > .e-con.e-flex.elementor-element-9469cea {
	padding-top: 96px;
	padding-bottom: 96px;
}

html .elementor > .e-con.e-flex.elementor-element-087583e,
html .elementor > .e-con.e-flex.elementor-element-d18b7a9,
html .elementor > .e-con.e-flex.elementor-element-4e8f100 {
	padding-top: 88px;
	padding-bottom: 88px;
}

/* Cartoes no raio da spec. */
html .tribo-caminho__link,
html .tribo-atalhos,
html .tribo-ceu,
html .tribo-post,
html .tribo-signo,
html .tribo-pilar,
html .tribo-cartao {
	border-radius: 20px;
}

/* O apoio do heroi cresce junto: 18,5px num H1 de 60 fica fino. */
html .elementor-element-22378d4 .elementor-widget-text-editor p {
	font-size: 19px;
	line-height: 1.6;
}

/* ---- a fotografia do cliente no heroi ---- */

html .elementor-element-22378d4 {
	background-color: #E7E2D9;
	background-image:
		linear-gradient(93deg, rgba(252,250,247,.94) 0%, rgba(252,250,247,.82) 26%, rgba(252,250,247,.30) 52%, rgba(252,250,247,.02) 74%, rgba(252,250,247,0) 100%),
		url("/wp-content/uploads/tribo/hero.webp");
	background-size: cover, cover;
	background-position: center, center 40%;
}

@media (max-width: 900px) {
	html .elementor-element-22378d4 {
		background-image:
			linear-gradient(180deg, rgba(252,250,247,.94) 0%, rgba(252,250,247,.84) 40%, rgba(252,250,247,.5) 72%, rgba(252,250,247,.3) 100%),
			url("/wp-content/uploads/tribo/hero.webp");
	}

	html .elementor-element-22378d4 .elementor-heading-title { font-size: 38px; }
	html .elementor h2.elementor-heading-title,
	html .tribo-signos-titulo,
	html .tribo-secao-titulo { font-size: 30px; }
}

/* As regras de altura que eu tinha posto encolhiam o titulo em
   tela baixa. Com a escala nova elas so aliviam o respiro, sem
   mexer na tipografia -- senao desfazem o que a spec pede. */
@media (min-width: 901px) and (max-height: 760px) {
	html .elementor-element-22378d4 .elementor-heading-title { font-size: 50px; }
	html .tribo-cartao__lead { display: none; }
}

/* ============================================================
   Alinhamento com a referencia enviada (zip de 02/09)
   ------------------------------------------------------------
   O pacote traz index.html + styles.css, que sao a fonte exata.
   Conferido contra eles, eu tinha errado tres coisas:

     rodape: fiz azul-noite a partir do PNG; a referencia diz
       .footer{background:var(--cream)} -- claro.
     eyebrow: removi por regra de oficio; a referencia o tem, e
       o briefing vence a regra.
     ladrilhos: fiz quadrados; a referencia usa circulo branco
       com sombra no heroi e circulo de 42px na faixa.

   Daqui para baixo os valores vem do styles.css da referencia.
   ============================================================ */

/* ---- rodape volta a ser claro ---- */

.elementor-location-footer {
	border-top: 1px solid #E7DED2;
	background: #FCFAF7;
}

html .tribo-rodape__nome,
html .tribo-rodape__titulo {
	color: var(--titulo);
}

html .tribo-rodape__lema,
html .tribo-rodape__contato,
html .tribo-rodape__base {
	color: var(--texto);
}

html .tribo-rodape a { color: var(--texto); }
html .tribo-rodape a:hover { color: var(--azul); }
html .tribo-rodape__base { border-top-color: #E7DED2; }

html .tribo-rodape__pagamento {
	border-color: var(--linha);
	background: var(--branco);
	color: var(--texto);
}

html .tribo-rodape__busca input {
	border-color: #D7D8D8;
	background: var(--branco);
	color: var(--tinta);
}

html .tribo-rodape__busca input::placeholder { color: var(--silencio); }

html .tribo-rodape__busca button {
	background: var(--azul);
	color: #fff;
}

html .tribo-rodape__busca button:hover { background: var(--tinta); }

/* ---- heroi: eyebrow e pontos circulares ---- */

html .elementor-element-22378d4 .elementor-element-2026d51 {
	display: block;
}

html .elementor-element-22378d4 .elementor-element-2026d51 p {
	margin-bottom: 15px;
	color: var(--azul);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
}

html .tribo-prova {
	gap: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--tinta);
}

/* Circulo branco com sombra, nao ladrilho quadrado. */
html .tribo-prova::before {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: #fff;
	background-size: 15px 15px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
}

/* ---- faixa de atalhos ---- */

html .tribo-atalho__marca {
	width: 42px;
	height: 42px;
	border-radius: 50%;
}

html .tribo-atalhos {
	border-radius: 16px;
	padding: 17px 10px;
}

html .tribo-atalho {
	padding: 8px 17px;
	border-right: 1px solid var(--linha);
}

html .tribo-atalho:last-child { border-right: 0; }

/* ---- secoes ---- */

html .elementor > .e-con.e-flex.elementor-element-1b4ab8f,
html .elementor > .e-con.e-flex.elementor-element-02fa22e,
html .elementor > .e-con.e-flex.elementor-element-c498083,
html .elementor > .e-con.e-flex.elementor-element-9469cea {
	padding-top: 82px;
	padding-bottom: 82px;
}

/* A faixa de textos tem creme mais quente na referencia. */
html .elementor > .e-con.e-flex.elementor-element-c498083 {
	background-color: #F7F1E8;
}

/* ---- caminhos ---- */

html .tribo-caminhos {
	max-width: 940px;
	margin-inline: auto;
	gap: 20px;
}

html .tribo-caminho__link { border-radius: 14px; }
html .tribo-caminho__foto { aspect-ratio: auto; height: 200px; }
html .tribo-caminho__titulo { font-size: 25px; margin-bottom: 5px; }
html .tribo-caminho__texto { font-size: 14px; margin-bottom: 10px; }
html .tribo-caminho__acao { font-size: 13px; font-weight: 700; }

/* ---- signos ---- */

html .tribo-signo {
	border-radius: 12px;
	min-height: 126px;
	padding: 17px 8px 14px;
}

html .tribo-signo-glifo { font-size: 34px; }
html .tribo-signo-nome { font-size: 16px; }
html .tribo-signo-periodo { font-size: 10.5px; }

/* ---- ceu agora ---- */

html .tribo-ceu {
	max-width: 960px;
	margin-inline: auto;
	padding: 34px 52px;
	border-radius: 20px;
}

/* ---- pilares ---- */

html .tribo-pilar {
	border-radius: 12px;
	padding: 24px;
}

html .tribo-pilar p { min-height: 64px; font-size: 14px; }
html .tribo-pilar h3 { font-size: 20px; margin: 9px 0 5px; }

/* ---- textos ---- */

html .tribo-blog-home .tribo-post { border-radius: 14px; }
html .tribo-blog-home .tribo-post__capa { aspect-ratio: auto; height: 185px; }
html .tribo-blog-home .tribo-post__titulo { font-size: 20px; line-height: 1.18; }

/* ---- numeros ---- */

html .elementor > .e-con.e-flex.elementor-element-d18b7a9 {
	background-color: var(--branco);
	padding-top: 45px;
	padding-bottom: 45px;
}

html .tribo-numeros > * + * {
	border-left: 1px solid var(--linha);
}

html .tribo-numero__v {
	font-family: var(--fonte-titulo);
	font-size: 38px;
	color: #0B3E82;
}

html .tribo-numero__r { font-size: 12px; line-height: 1.35; }

/* ---- fecho com a fotografia panoramica ---- */

html .elementor > .e-con.e-flex.elementor-element-4e8f100 {
	position: relative;
	overflow: hidden;
	background-color: #071F40;
	background-image: none;
	padding-top: 56px;
	padding-bottom: 56px;
}

html .elementor-element-4e8f100::after {
	content: "";
	position: absolute;
	inset: 0 0 0 55%;
	background: url("/wp-content/uploads/tribo/cta-final.webp") center / cover no-repeat;
	opacity: .92;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 35%);
	mask-image: linear-gradient(90deg, transparent, #000 35%);
	pointer-events: none;
}

html .elementor-element-4e8f100 > * {
	position: relative;
	z-index: 2;
}

@media (max-width: 980px) {
	html .elementor-element-4e8f100::after { inset: 0; opacity: .35; }
	html .tribo-atalho { border-right: 0; }
	html .tribo-numeros > * + * { border-left: 0; }
}

/* Link do cartao de signo, como na referencia. */
html .tribo-signo-link {
	display: inline-block;
	margin-top: 4px;
	color: var(--azul);
	font-size: 11px;
	font-weight: 700;
	text-decoration: none;
}

html .tribo-signo-link::after {
	content: " \2192";
}

html .tribo-signo-link:hover { text-decoration: underline; }

html .tribo-signo-meta { display: none; }

/* ---- rodape: coluna de novidades, como na referencia ---- */

html .tribo-rodape__topo {
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 2.4fr) minmax(0, 1.35fr);
	gap: 36px;
}

.tribo-rodape__novidades-lead {
	margin-bottom: var(--e-3);
	color: var(--texto);
	font-size: var(--t-sm);
}

.tribo-rodape__form {
	display: flex;
	gap: 6px;
}

.tribo-rodape__form input {
	flex: 1;
	min-width: 0;
	padding: 9px 11px;
	border: 1px solid #D7D8D8;
	border-radius: 6px;
	background: var(--branco);
	color: var(--tinta);
	font: inherit;
	font-size: var(--t-sm);
}

.tribo-rodape__form input:focus-visible {
	outline: 2px solid var(--azul);
	outline-offset: 1px;
}

.tribo-rodape__form button {
	padding: 9px 16px;
	border: 0;
	border-radius: 6px;
	background: var(--azul);
	color: #fff;
	font: inherit;
	font-size: var(--t-sm);
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.tribo-rodape__form button:hover { background: var(--tinta); }

.tribo-rodape__novidades-nota {
	margin: 8px 0 0;
	color: var(--silencio);
	font-size: 11px;
}

/* A busca sai do rodape: a referencia poe newsletter nesse lugar,
   e o topo ja tem busca. Duas buscas na mesma pagina e ruido. */
html .tribo-rodape__busca { display: none; }

@media (max-width: 900px) {
	html .tribo-rodape__topo { grid-template-columns: 1fr; }
}

/* Os links novos (signo, novidades, caminhos) entram na regra de
   alvo de toque de 44px, que ate agora so cobria menu e rodape. */
@media (max-width: 980px) {
	.tribo-signo-link,
	.tribo-caminho__acao,
	.tribo-rodape__novidades a,
	.tribo-rodape__legais a,
	.tribo-rodape__base a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.tribo-rodape__form input,
	.tribo-rodape__form button {
		min-height: 44px;
	}
}

/* ============================================================
   Pagina de um texto (single.php)
   ------------------------------------------------------------
   Ate 03/09/2026 um texto publicado caia no single.php padrao do
   Hello Elementor: titulo cru e o corpo, sem capa, sem autor, sem
   tempo de leitura. Os dados ja existiam (capa, resumo, autor,
   categoria); so nao havia template desenhando com eles.

   Duas colunas no desktop, como a referencia que o cliente
   indicou: uma faixa fina de compartilhar, fixa ao lado do texto,
   e a coluna larga do artigo. A medida de leitura fica em 720px --
   no limite estreito da faixa confortavel a 18px, de proposito:
   paragrafo longo demais cansa mais do que impressiona.
   ============================================================ */

.tribo-post-single {
	max-width: 880px;
	margin: 0 auto;
	padding: var(--e-8) var(--e-6) var(--e-9);
}

/* ---- cabecalho ---- */

.tribo-post-single__trilha {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--e-5);
	color: var(--silencio);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tribo-post-single__trilha a {
	color: var(--azul);
	text-decoration: none;
}

.tribo-post-single__trilha a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tribo-post-single__topo h1 {
	max-width: 20ch;
	margin-bottom: var(--e-4);
	font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
	line-height: 1.12;
}

.tribo-post-single__lead {
	max-width: 62ch;
	margin-bottom: var(--e-6);
	color: var(--texto);
	font-size: var(--t-lg);
	line-height: 1.5;
}

.tribo-post-single__assinatura {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-block: var(--e-5);
	border-top: 1px solid var(--linha);
	border-bottom: 1px solid var(--linha);
}

.tribo-post-single__avatar {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--leite);
	color: var(--azul);
	font-family: var(--fonte-titulo);
	font-size: 17px;
}

.tribo-post-single__quem {
	display: block;
}

.tribo-post-single__nome {
	display: block;
	color: var(--titulo);
	font-weight: 600;
	font-size: var(--t-sm);
}

.tribo-post-single__quando {
	display: block;
	color: var(--silencio);
	font-size: 13px;
}

/* ---- capa ---- */

.tribo-post-single__capa {
	overflow: hidden;
	margin-top: var(--e-6);
	border-radius: var(--r-lg);
	aspect-ratio: 16 / 9;
}

.tribo-post-single__capa img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- as duas colunas: compartilhar + corpo ---- */

.tribo-post-single__corpo {
	display: grid;
	grid-template-columns: 56px minmax(0, 720px);
	gap: 40px;
	margin-top: var(--e-7);
}

.tribo-post-single__compartilhar {
	position: sticky;
	top: 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	align-self: start;
}

.tribo-post-single__compartilhar-rotulo {
	margin-bottom: 2px;
	color: var(--silencio);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
}

.tribo-post-single__rede {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--linha);
	border-radius: 50%;
	background: var(--branco);
	color: var(--tinta-media);
	cursor: pointer;
	transition: border-color var(--transicao), color var(--transicao), transform var(--transicao);
}

.tribo-post-single__rede svg {
	width: 18px;
	height: 18px;
}

.tribo-post-single__rede:hover {
	border-color: var(--azul);
	color: var(--azul);
	transform: translateY(-1px);
}

.tribo-post-single__rede--copiar[data-copiado="sim"] {
	border-color: var(--azul);
	background: var(--azul);
	color: #fff;
}

/* ---- o corpo do texto ---- */

.tribo-post-single__conteudo {
	color: var(--texto);
	font-size: 18px;
	line-height: 1.75;
}

.tribo-post-single__conteudo > * + * {
	margin-top: var(--e-5);
}

.tribo-post-single__conteudo h2 {
	margin-top: var(--e-7);
	font-size: var(--t-lg);
	color: var(--titulo);
}

.tribo-post-single__conteudo h3 {
	margin-top: var(--e-6);
	font-size: var(--t-md);
	color: var(--titulo);
}

.tribo-post-single__conteudo h2 + *,
.tribo-post-single__conteudo h3 + * {
	margin-top: var(--e-3);
}

.tribo-post-single__conteudo strong {
	color: var(--titulo);
	font-weight: 700;
}

.tribo-post-single__conteudo a {
	color: var(--azul);
	text-underline-offset: 3px;
}

.tribo-post-single__conteudo ul,
.tribo-post-single__conteudo ol {
	padding-left: 1.3em;
}

.tribo-post-single__conteudo li + li {
	margin-top: 8px;
}

.tribo-post-single__conteudo blockquote {
	margin-inline: 0;
	padding-left: var(--e-5);
	border-left: 2px solid var(--linha);
	color: var(--titulo);
	font-family: var(--fonte-titulo);
	font-size: var(--t-md);
	font-style: italic;
	line-height: 1.5;
}

.tribo-post-single__conteudo img,
.tribo-post-single__conteudo figure {
	max-width: 100%;
	border-radius: var(--r);
}

.tribo-post-single__conteudo figcaption {
	margin-top: 6px;
	color: var(--silencio);
	font-size: var(--t-xs);
	text-align: center;
}

.tribo-post-single__conteudo hr {
	border: 0;
	border-top: 1px solid var(--linha);
}

/* ---- autor, quando existe biografia real ---- */

.tribo-post-single__autor-caixa {
	display: flex;
	gap: var(--e-4);
	margin-top: var(--e-8);
	padding: var(--e-6);
	border-radius: var(--r-lg);
	background: var(--leite);
}

.tribo-post-single__avatar--grande {
	width: 56px;
	height: 56px;
	font-size: 22px;
}

.tribo-post-single__autor-nome {
	margin-bottom: 4px;
	color: var(--titulo);
	font-weight: 700;
}

.tribo-post-single__autor-bio {
	margin-bottom: 0;
	max-width: 60ch;
	color: var(--texto);
	font-size: var(--t-sm);
}

/* ---- responsivo ---- */

@media (max-width: 860px) {
	.tribo-post-single {
		padding: var(--e-6) var(--e-5) var(--e-8);
	}

	.tribo-post-single__topo h1 {
		max-width: none;
		font-size: clamp(1.75rem, 1.5rem + 2vw, 2.25rem);
	}

	.tribo-post-single__corpo {
		grid-template-columns: 1fr;
		gap: var(--e-5);
	}

	.tribo-post-single__compartilhar {
		position: static;
		flex-direction: row;
		justify-content: flex-start;
	}

	.tribo-post-single__compartilhar-rotulo {
		writing-mode: horizontal-tb;
	}

	.tribo-post-single__conteudo {
		font-size: 17px;
	}
}

/* ============================================================
   Perfil de um signo (/signos/<signo>/)
   ------------------------------------------------------------
   O portal de referencia tem duas paginas por signo: a leitura
   do dia e o perfil. Nos tinhamos so a primeira -- a grade dos
   doze na home nao levava a lugar nenhum que respondesse "o que
   e ser de Aries".

   A ficha (elemento, modalidade, regente, oposto) fica separada
   do texto de proposito: uma coisa e dado do zodiaco, a outra e
   leitura tradicional, e o desenho nao deve confundir as duas.
   ============================================================ */

.tribo-signo-perfil {
	max-width: 760px;
	margin-inline: auto;
	padding-block: var(--e-6) var(--e-8);
}

.tribo-signo-perfil__topo {
	margin-bottom: var(--e-6);
}

.tribo-signo-perfil__glifo {
	display: block;
	margin-bottom: var(--e-2);
	font-size: 58px;
	line-height: 1;
}

.tribo-signo-perfil--fogo  .tribo-signo-perfil__glifo { color: var(--chakra-raiz-texto); }
.tribo-signo-perfil--terra .tribo-signo-perfil__glifo { color: var(--chakra-cardiaco-texto); }
.tribo-signo-perfil--ar    .tribo-signo-perfil__glifo { color: var(--chakra-sacral-texto); }
.tribo-signo-perfil--agua  .tribo-signo-perfil__glifo { color: var(--chakra-laringeo-texto); }

.tribo-signo-perfil__datas {
	margin: 0;
	color: var(--texto);
	font-size: var(--t-sm);
}

/* ---- a ficha estrutural ---- */

.tribo-signo-perfil__ficha {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	gap: 1px;
	margin: 0 0 var(--e-7);
	padding: 0;
	border: 1px solid var(--linha);
	border-radius: var(--r);
	background: var(--linha);
	overflow: hidden;
}

.tribo-signo-perfil__ficha > div {
	padding: 14px 16px;
	background: var(--branco);
}

.tribo-signo-perfil__ficha dt {
	margin-bottom: 2px;
	color: var(--silencio);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.tribo-signo-perfil__ficha dd {
	margin: 0;
	color: var(--titulo);
	font-family: var(--fonte-titulo);
	font-size: var(--t-md);
}

.tribo-signo-perfil__nota {
	display: block;
	color: var(--silencio);
	font-family: var(--fonte-texto);
	font-size: 12px;
}

/* ---- o texto ---- */

.tribo-signo-perfil__texto {
	color: var(--texto);
	font-size: 17px;
	line-height: 1.72;
}

.tribo-signo-perfil__resumo {
	color: var(--titulo);
	font-size: var(--t-md);
	line-height: 1.6;
}

.tribo-signo-perfil__texto h2 {
	margin: var(--e-6) 0 var(--e-2);
	font-size: var(--t-lg);
}

/* ---- o limite da leitura ---- */

.tribo-signo-perfil__limite {
	margin-top: var(--e-7);
	padding: var(--e-6);
	border-radius: var(--r-lg);
	background: var(--leite);
}

.tribo-signo-perfil__limite p {
	max-width: 60ch;
	color: var(--texto);
	font-size: var(--t-sm);
}

.tribo-signo-perfil__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-4);
	margin-bottom: 0;
	margin-top: var(--e-5);
}

.tribo-signo-perfil__hoje {
	color: var(--azul);
	font-size: var(--t-sm);
	font-weight: 600;
	text-decoration: none;
}

.tribo-signo-perfil__hoje:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- os outros onze ---- */

.tribo-signo-perfil__outros {
	margin-top: var(--e-7);
	padding-top: var(--e-5);
	border-top: 1px solid var(--linha);
}

.tribo-signo-perfil__outros-rotulo {
	margin-bottom: var(--e-3);
	color: var(--titulo);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.tribo-signo-perfil__outros ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2) var(--e-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tribo-signo-perfil__outros a {
	color: var(--texto);
	font-size: var(--t-sm);
	text-decoration: none;
}

.tribo-signo-perfil__outros a:hover { color: var(--azul); }

@media (max-width: 860px) {
	.tribo-signo-perfil__glifo { font-size: 46px; }
	.tribo-signo-perfil__outros a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ==========================================================================
   HOME  --  03/09/2026
   Desenho aprovado pelo cliente, montado sobre os componentes reais.
   Tudo escopado em #tribo-home. Nada aqui pode vazar para outra pagina.
   ========================================================================== */

#tribo-home {
	--home-max: 1180px;
	--home-sombra: 0 18px 50px rgba(17, 36, 65, .12);
	--home-sombra-leve: 0 8px 26px rgba(17, 36, 65, .08);

	width: 100%;
	max-width: 100%;
	color: var(--texto);
	background: var(--papel);
}

#tribo-home * { box-sizing: border-box; }

/* A largura de leitura. O bloco original zerava o max-width numa regra
   posterior, e por isso o conteudo se esparramava na largura toda. */
#tribo-home .tribo-home__interno {
	width: min(100% - 2.5rem, var(--home-max));
	margin-inline: auto;
}

#tribo-home .tribo-home__secao { padding: 5rem 0; }

#tribo-home .tribo-home__cabecalho {
	max-width: 50rem;
	margin-bottom: 2.25rem;
	text-align: center;
}

#tribo-home .tribo-home__cabecalho h2 {
	margin: 0 0 .5rem;
	color: var(--titulo);
	font-size: var(--t-xl);
	line-height: 1.15;
	text-wrap: balance;
}

#tribo-home .tribo-home__cabecalho p {
	margin: 0;
	color: var(--silencio);
	font-size: var(--t-base);
}

#tribo-home .tribo-home__seta {
	display: inline-block;
	color: var(--azul);
	font-size: var(--t-xs);
	font-weight: 700;
}

/* --------------------------------------------------------------- heroi -- */

#tribo-home .tribo-home__heroi {
	position: relative;
	isolation: isolate;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-block: 2.5rem 0;
}

/* O veu que clareia a foto e um elemento com fundo proprio, e nao um
   pseudo-elemento com z-index negativo: dentro de um contexto de
   empilhamento isolado, negativo pinta atras da propria imagem de fundo e
   nao clareia nada -- era por isso que o texto ficava ilegivel. */
#tribo-home .tribo-home__veu {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(252, 250, 247, .98) 0%,
		rgba(252, 250, 247, .93) 34%,
		rgba(252, 250, 247, .55) 60%,
		rgba(252, 250, 247, .12) 100%
	);
}

#tribo-home .tribo-home__heroi > .tribo-home__interno {
	position: relative;
	z-index: 2;
}

#tribo-home .tribo-home__heroi-grade {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(19rem, .7fr);
	gap: clamp(1.75rem, 5vw, 5.5rem);
	align-items: center;
	padding-bottom: 4.5rem;
}

#tribo-home .tribo-home__heroi-texto { max-width: 39rem; }

#tribo-home .tribo-home__sobrancelha {
	margin: 0 0 .9rem;
	color: var(--azul);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .14em;
}

#tribo-home .tribo-home__heroi h1 {
	margin: 0 0 1.1rem;
	color: var(--titulo);
	font-size: var(--t-3xl);
	line-height: 1.04;
	letter-spacing: -.02em;
	text-wrap: balance;
}

#tribo-home .tribo-home__lead {
	max-width: 34rem;
	margin: 0 0 1.6rem;
	font-size: var(--t-md);
}

#tribo-home .tribo-home__pontos {
	display: grid;
	gap: .85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

#tribo-home .tribo-home__pontos li {
	display: flex;
	gap: .7rem;
	align-items: center;
	color: var(--titulo);
	font-size: var(--t-sm);
	font-weight: 600;
}

#tribo-home .tribo-home__ponto {
	display: grid;
	flex: 0 0 1.9rem;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--branco);
	box-shadow: 0 3px 12px rgba(0, 0, 0, .09);
	font-size: .8rem;
}

#tribo-home .tribo-home__ponto--sol   { color: var(--chakra-sacral-texto); }
#tribo-home .tribo-home__ponto--agua  { color: var(--chakra-laringeo-texto); }
#tribo-home .tribo-home__ponto--terra { color: var(--chakra-cardiaco-texto); }

#tribo-home .tribo-home__heroi-cartao { justify-self: end; width: 100%; max-width: 27rem; }

/* --------------------------------------------------------------- atalhos - */

/* A faixa avanca 3rem sobre a secao seguinte. O bloco original a punha em
   position:absolute com bottom negativo dentro de um pai com overflow
   hidden, e ela era cortada fora. Margem negativa faz o mesmo efeito sem
   depender de o pai nao recortar. */
#tribo-home .tribo-home__atalhos-caixa {
	position: relative;
	z-index: 3;
	margin-bottom: -3rem;
}

#tribo-home .tribo-home__atalhos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-radius: 1rem;
	background: var(--branco);
	box-shadow: var(--home-sombra);
	padding: .75rem .5rem;
}

#tribo-home .tribo-home__atalho {
	display: flex;
	gap: .8rem;
	align-items: center;
	min-height: 4.5rem;
	padding: .5rem 1rem;
	border-right: 1px solid var(--linha);
	color: var(--titulo);
	text-decoration: none;
}

#tribo-home .tribo-home__atalho:last-child { border-right: 0; }
#tribo-home .tribo-home__atalho:hover strong { color: var(--azul); }

#tribo-home .tribo-home__atalho strong { display: block; font-size: var(--t-sm); }

#tribo-home .tribo-home__atalho small {
	display: block;
	margin-top: .15rem;
	color: var(--silencio);
	font-size: var(--t-xs);
	line-height: 1.35;
}

#tribo-home .tribo-home__atalho-icone {
	flex: 0 0 2.6rem;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: var(--acao-tenue);
}

#tribo-home .tribo-home__atalho-icone--roxo   { background: #F1ECFA; }
#tribo-home .tribo-home__atalho-icone--laranja { background: #FBEEE0; }
#tribo-home .tribo-home__atalho-icone--verde  { background: #E6F2EB; }
#tribo-home .tribo-home__atalho-icone--rosa   { background: #F8E9F2; }

/* -------------------------------------------------------------- caminhos - */

#tribo-home .tribo-home__caminhos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	max-width: 58rem;
}

#tribo-home .tribo-home__caminho {
	overflow: hidden;
	border: 1px solid var(--linha);
	border-radius: .9rem;
	background: var(--branco);
	transition: transform .25s ease, box-shadow .25s ease;
}

#tribo-home .tribo-home__caminho:hover {
	transform: translateY(-4px);
	box-shadow: var(--home-sombra-leve);
}

#tribo-home .tribo-home__caminho-capa { display: block; }

#tribo-home .tribo-home__caminho-capa img {
	display: block;
	width: 100%;
	height: 12.5rem;
	object-fit: cover;
}

#tribo-home .tribo-home__caminho-corpo { padding: 1.1rem 1.2rem 1.3rem; }

#tribo-home .tribo-home__caminho h3 {
	margin: 0 0 .3rem;
	font-size: var(--t-lg);
}

#tribo-home .tribo-home__caminho h3 a { color: var(--titulo); text-decoration: none; }
#tribo-home .tribo-home__caminho h3 a:hover { color: var(--azul); }

#tribo-home .tribo-home__caminho p {
	margin: 0 0 .6rem;
	font-size: var(--t-sm);
}

/* ---------------------------------------------------------------- signos - */

#tribo-home .tribo-home__secao--signos { background: var(--branco); }

#tribo-home .tribo-home__signos {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: .75rem;
}

#tribo-home .tribo-home__signo {
	border: 1px solid var(--linha);
	border-radius: .75rem;
	background: var(--papel);
	transition: transform .2s ease, box-shadow .2s ease;
}

#tribo-home .tribo-home__signo:hover {
	transform: translateY(-3px);
	box-shadow: var(--home-sombra-leve);
}

#tribo-home .tribo-home__signo a {
	display: block;
	padding: 1rem .5rem .9rem;
	color: var(--titulo);
	text-align: center;
	text-decoration: none;
}

#tribo-home .tribo-home__signo-glifo {
	display: block;
	margin-bottom: .15rem;
	font-size: 2rem;
	line-height: 1;
}

/* A cor diz o elemento do signo. O bloco original ciclava cores a cada
   sete cartoes, o que pintava signos vizinhos com cores sem significado. */
#tribo-home .tribo-home__signo--fogo  .tribo-home__signo-glifo { color: var(--chakra-raiz-texto); }
#tribo-home .tribo-home__signo--terra .tribo-home__signo-glifo { color: var(--chakra-cardiaco-texto); }
#tribo-home .tribo-home__signo--ar    .tribo-home__signo-glifo { color: var(--chakra-sacral-texto); }
#tribo-home .tribo-home__signo--agua  .tribo-home__signo-glifo { color: var(--chakra-laringeo-texto); }

#tribo-home .tribo-home__signo strong { display: block; font-size: var(--t-base); }

#tribo-home .tribo-home__signo small {
	display: block;
	margin: .2rem 0 .35rem;
	color: var(--silencio);
	font-size: .7rem;
}

/* ------------------------------------------------------------------- ceu - */

#tribo-home .tribo-home__secao--ceu { padding-top: 2.5rem; }

#tribo-home .tribo-home__ceu {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border-radius: 1.25rem;
	background: #071F40;
	box-shadow: var(--home-sombra-leve);
	color: #DCE9F6;
}

#tribo-home .tribo-home__ceu .tribo-ceu {
	margin: 0;
	padding: 0;
	background: none;
}

#tribo-home .tribo-home__ceu .tribo-ceu__titulo,
#tribo-home .tribo-home__ceu .tribo-ceu__nome { color: var(--branco); }

#tribo-home .tribo-home__ceu .tribo-ceu__lead,
#tribo-home .tribo-home__ceu .tribo-ceu__lugar,
#tribo-home .tribo-home__ceu .tribo-ceu__marca { color: #C6D6E9; }

#tribo-home .tribo-home__ceu .tribo-ceu__item { border-bottom-color: rgba(255, 255, 255, .12); }

#tribo-home .tribo-home__ceu .tribo-btn {
	background: var(--branco);
	color: var(--azul);
}

/* ---------------------------------------------------------------- pilares- */

#tribo-home .tribo-home__pilares {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.1rem;
}

#tribo-home .tribo-home__pilar {
	position: relative;
	overflow: hidden;
	padding: 1.5rem;
	border: 1px solid var(--linha);
	border-radius: .75rem;
	background: var(--branco);
}

#tribo-home .tribo-home__pilar::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
}

#tribo-home .tribo-home__pilar--espirito::before { background: var(--chakra-frontal); }
#tribo-home .tribo-home__pilar--mente::before    { background: var(--chakra-laringeo); }
#tribo-home .tribo-home__pilar--corpo::before    { background: var(--chakra-cardiaco); }

#tribo-home .tribo-home__pilar--espirito .tribo-home__pilar-icone { color: var(--chakra-frontal-texto); }
#tribo-home .tribo-home__pilar--mente    .tribo-home__pilar-icone { color: var(--chakra-laringeo-texto); }
#tribo-home .tribo-home__pilar--corpo    .tribo-home__pilar-icone { color: var(--chakra-cardiaco-texto); }

#tribo-home .tribo-home__pilar-icone { font-size: 1.6rem; line-height: 1; }

#tribo-home .tribo-home__pilar h3 {
	margin: .6rem 0 .3rem;
	color: var(--titulo);
	font-size: var(--t-md);
}

/* O pilar nao tem link: por decisao do cliente em 08/09/2026, ele e
   bloco de leitura, e nao porta. Sem seta embaixo, o paragrafo e o
   ultimo elemento e nao pede margem inferior. O `min-height` fica: e
   ele que alinha os tres textos quando um deles tem uma linha a mais. */
#tribo-home .tribo-home__pilar p {
	min-height: 3.75rem;
	margin: 0;
	font-size: var(--t-sm);
}

/* ---------------------------------------------------------------- textos - */

#tribo-home .tribo-home__secao--textos { background: var(--leite); }

/* --------------------------------------------------------------- numeros - */

#tribo-home .tribo-home__numeros {
	padding: 2.75rem 0;
	background: var(--branco);
	border-block: 1px solid var(--linha);
}

#tribo-home .tribo-home__numeros-grade {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	text-align: center;
}

#tribo-home .tribo-home__numeros-grade > div {
	padding: 0 1rem;
	border-right: 1px solid var(--linha);
}

#tribo-home .tribo-home__numeros-grade > div:last-child { border-right: 0; }

#tribo-home .tribo-home__numeros-grade strong {
	display: block;
	color: var(--azul-escuro);
	font-size: var(--t-xl);
	line-height: 1.1;
}

#tribo-home .tribo-home__numeros-grade span {
	display: block;
	margin-top: .3rem;
	color: var(--silencio);
	font-size: var(--t-xs);
	line-height: 1.4;
}

/* -------------------------------------------------------------- chamada -- */

#tribo-home .tribo-home__chamada {
	position: relative;
	overflow: hidden;
	background: #071F40;
	color: var(--branco);
}

#tribo-home .tribo-home__chamada::after {
	content: "";
	position: absolute;
	inset: 0 0 0 52%;
	background: var(--tribo-home-cta) center / cover no-repeat;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 38%);
	mask-image: linear-gradient(90deg, transparent, #000 38%);
}

#tribo-home .tribo-home__chamada-grade {
	position: relative;
	z-index: 2;
	display: flex;
	gap: 2.5rem;
	align-items: center;
	justify-content: space-between;
	min-height: 11rem;
	padding: 2.25rem 0;
}

#tribo-home .tribo-home__chamada h2 {
	margin: 0 0 .3rem;
	color: var(--branco);
	font-size: var(--t-xl);
}

#tribo-home .tribo-home__chamada p {
	max-width: 34rem;
	margin: 0;
	color: #D6E0EE;
}

#tribo-home .tribo-home__chamada .tribo-btn {
	flex: 0 0 auto;
	max-width: 20rem;
}

.tribo-btn--claro {
	background: var(--branco);
	color: var(--azul);
	border-color: var(--branco);
}

.tribo-btn--claro:hover,
.tribo-btn--claro:focus-visible {
	background: var(--acao-tenue);
	color: var(--azul-escuro);
}

/* -------------------------------------------------------------- telas ---- */

@media (max-width: 62rem) {
	#tribo-home .tribo-home__heroi-grade {
		grid-template-columns: 1fr;
		padding-bottom: 3rem;
	}

	#tribo-home .tribo-home__heroi { background-position: 68% center; }

	#tribo-home .tribo-home__veu {
		background: linear-gradient(
			90deg,
			rgba(252, 250, 247, .97) 0%,
			rgba(252, 250, 247, .88) 100%
		);
	}

	#tribo-home .tribo-home__heroi-cartao { justify-self: start; max-width: 32rem; }
	#tribo-home .tribo-home__atalhos { grid-template-columns: repeat(2, 1fr); }
	#tribo-home .tribo-home__atalho:nth-child(2) { border-right: 0; }
	#tribo-home .tribo-home__caminhos { grid-template-columns: 1fr; }
	#tribo-home .tribo-home__signos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	#tribo-home .tribo-home__pilares { grid-template-columns: 1fr; }

	#tribo-home .tribo-home__chamada-grade {
		display: block;
		padding: 2.5rem 0;
	}

	#tribo-home .tribo-home__chamada .tribo-btn { margin-top: 1.25rem; }
	#tribo-home .tribo-home__chamada::after { inset: 0; opacity: .3; }
}

@media (max-width: 40rem) {
	#tribo-home .tribo-home__secao { padding: 3.5rem 0; }
	#tribo-home .tribo-home__atalhos { grid-template-columns: 1fr; }

	#tribo-home .tribo-home__atalho {
		border-right: 0;
		border-bottom: 1px solid var(--linha);
	}

	#tribo-home .tribo-home__atalho:last-child { border-bottom: 0; }
	#tribo-home .tribo-home__signos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#tribo-home .tribo-home__caminho-capa img { height: 10rem; }

	#tribo-home .tribo-home__numeros-grade {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	#tribo-home .tribo-home__numeros-grade > div { border-right: 0; }
}

/* ==========================================================================
   TERAPIAS  --  03/09/2026
   ========================================================================== */

.tribo-terapias__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: 1rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.tribo-terapia-cartao {
	padding: 1.25rem 1.35rem 1.4rem;
	border: 1px solid var(--linha);
	border-radius: .75rem;
	background: var(--branco);
}

.tribo-terapia-cartao h3 {
	margin: 0 0 .4rem;
	font-size: var(--t-md);
}

.tribo-terapia-cartao h3 a { color: var(--titulo); text-decoration: none; }
.tribo-terapia-cartao h3 a:hover { color: var(--azul); }

.tribo-terapia-cartao__resumo {
	margin: 0 0 .7rem;
	color: var(--texto);
	font-size: var(--t-sm);
}

.tribo-terapia-cartao__meta {
	margin: 0;
	color: var(--silencio);
	font-size: var(--t-xs);
}

.tribo-terapia { max-width: 47rem; margin-inline: auto; }

.tribo-terapia__topo { margin-bottom: 1.5rem; }

.tribo-terapia__rotulo {
	margin: 0 0 .4rem;
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.tribo-terapia__rotulo a { color: var(--azul); text-decoration: none; }

.tribo-terapia__topo h1 {
	margin: 0 0 .5rem;
	color: var(--titulo);
	font-size: var(--t-2xl);
	line-height: 1.08;
}

.tribo-terapia__resumo {
	margin: 0;
	color: var(--texto);
	font-size: var(--t-md);
}

.tribo-terapia__ficha {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
	gap: 1px;
	margin: 0 0 1.75rem;
	padding: 0;
	border: 1px solid var(--linha);
	border-radius: .6rem;
	background: var(--linha);
	overflow: hidden;
}

.tribo-terapia__ficha > div { padding: .85rem 1rem; background: var(--leite); }

.tribo-terapia__ficha dt {
	margin: 0 0 .2rem;
	color: var(--silencio);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tribo-terapia__ficha dd {
	margin: 0;
	color: var(--titulo);
	font-size: var(--t-sm);
}

.tribo-terapia__texto h2 {
	margin: 1.75rem 0 .5rem;
	color: var(--titulo);
	font-size: var(--t-lg);
}

.tribo-terapia__texto p { margin: 0; }

.tribo-terapia__aviso {
	margin: 2rem 0;
	padding: 1.25rem 1.35rem;
	border-radius: .4rem;
	font-size: var(--t-sm);
}

.tribo-terapia__aviso p { margin: 0 0 .6rem; }
.tribo-terapia__aviso p:last-child { margin-bottom: 0; }
.tribo-terapia__aviso strong { color: var(--titulo); }

.tribo-terapia__outras {
	margin-top: 2.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--linha);
}

.tribo-terapia__outras-rotulo {
	margin: 0 0 .75rem;
	color: var(--silencio);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tribo-terapia__outras ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tribo-terapia__outras a {
	display: inline-block;
	padding: .4rem .8rem;
	border: 1px solid var(--linha);
	border-radius: 99px;
	background: var(--branco);
	color: var(--texto);
	font-size: var(--t-xs);
	text-decoration: none;
}

.tribo-terapia__outras a:hover {
	border-color: var(--azul);
	color: var(--azul);
}

/* ==========================================================================
   TOPO  --  03/09/2026
   A barra tinha 72px de respiro de cada lado, o que deixava o miolo em
   1025px enquanto o conteudo da pagina corre em 1180px. Com uma entrada a
   mais no menu, a lista passou a transbordar por cima da marca -- e como ela
   e centralizada, o excedente saia pelos dois lados.
   Encostar o respiro no mesmo valor do conteudo resolve as duas coisas: a
   barra passa a ter a largura de que precisa, e o logo alinha com o texto
   que vem abaixo dele.
   ========================================================================== */

@media (min-width: 64rem) {
	.tribo-topo {
		max-width: 1240px;
		padding-inline: clamp(20px, 2vw, 30px);
	}
}

/* ==========================================================================
   CURSOS  --  03/09/2026
   Catalogo em tres trilhas, e a pagina de venda de cada curso.
   ========================================================================== */

.tribo-cursos__trilha { margin-bottom: 2.75rem; }

.tribo-cursos__trilha-titulo {
	margin: 0 0 1rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--linha);
	color: var(--titulo);
	font-size: var(--t-lg);
}

.tribo-cursos__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tribo-curso-cartao {
	display: flex;
	flex-direction: column;
	padding: 1.2rem 1.35rem 1.35rem;
	border: 1px solid var(--linha);
	border-radius: .75rem;
	background: var(--branco);
}

.tribo-curso-cartao__nivel {
	margin: 0 0 .5rem;
	color: var(--azul);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tribo-curso-cartao h3 {
	margin: 0 0 .4rem;
	font-size: var(--t-md);
}

.tribo-curso-cartao h3 a { color: var(--titulo); text-decoration: none; }
.tribo-curso-cartao h3 a:hover { color: var(--azul); }

.tribo-curso-cartao__promessa {
	flex: 1 1 auto;
	margin: 0 0 .8rem;
	color: var(--texto);
	font-size: var(--t-sm);
}

.tribo-curso-cartao__meta {
	margin: 0;
	color: var(--silencio);
	font-size: var(--t-xs);
}

.tribo-cursos__aviso {
	margin: 0;
	padding: 1.1rem 1.25rem;
	border-radius: .4rem;
	background: var(--acao-tenue);
	color: var(--texto);
	font-size: var(--t-sm);
}

/* ------------------------------------------------------ pagina do curso -- */

.tribo-curso { max-width: 47rem; margin-inline: auto; }

.tribo-curso__topo { margin-bottom: 1.75rem; }

.tribo-curso__rotulo {
	margin: 0 0 .4rem;
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.tribo-curso__rotulo a { color: var(--azul); text-decoration: none; }

.tribo-curso__topo h1 {
	margin: 0 0 .6rem;
	color: var(--titulo);
	font-size: var(--t-2xl);
	line-height: 1.08;
}

.tribo-curso__promessa {
	margin: 0 0 1.25rem;
	color: var(--texto);
	font-size: var(--t-md);
}

.tribo-curso__acao {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: center;
	margin: 0;
}

.tribo-curso__estado {
	padding: .3rem .7rem;
	border-radius: 99px;
	background: var(--leite);
	color: var(--silencio);
	font-size: var(--t-xs);
	font-weight: 600;
}

.tribo-curso__ficha {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
	gap: 1px;
	margin: 0 0 2rem;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--linha);
	border-radius: .6rem;
	background: var(--linha);
}

.tribo-curso__ficha > div { padding: .85rem 1rem; background: var(--leite); }

.tribo-curso__ficha dt {
	margin: 0 0 .2rem;
	color: var(--silencio);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tribo-curso__ficha dd {
	margin: 0;
	color: var(--titulo);
	font-size: var(--t-sm);
}

.tribo-curso__ementa h2,
.tribo-curso__publico h2 {
	margin: 0 0 .75rem;
	color: var(--titulo);
	font-size: var(--t-lg);
}

.tribo-curso__modulos {
	display: grid;
	gap: .1rem;
	margin: 0 0 2.25rem;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.tribo-curso__modulos li {
	display: flex;
	gap: .9rem;
	align-items: baseline;
	padding: .7rem .25rem;
	border-bottom: 1px solid var(--linha-clara);
	color: var(--titulo);
	font-size: var(--t-base);
}

.tribo-curso__modulos li:last-child { border-bottom: 0; }

/* O numero e informacao: a ementa e uma sequencia, e a ordem importa para
   quem esta decidindo se comeca por aqui ou por outro curso. */
.tribo-curso__numero {
	flex: 0 0 2rem;
	color: var(--azul);
	font-size: var(--t-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.tribo-curso__publico {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.tribo-curso__publico-bloco {
	padding: 1.25rem 1.35rem;
	border-radius: .6rem;
	background: var(--leite);
	font-size: var(--t-sm);
}

.tribo-curso__publico-bloco h2 { font-size: var(--t-md); }
.tribo-curso__publico-bloco p { margin: 0; }

/* Aqui a cor carrega sentido -- e para voce, nao e para voce --
   entao ela fica. O que muda e a forma: borda inteira de 1px e
   fundo tingido, que e caixa de aviso, em vez de barra lateral. */
.tribo-curso__publico-bloco--sim {
	border: 1px solid var(--chakra-cardiaco);
	background: var(--leite);
	background: color-mix(in srgb, var(--chakra-cardiaco) 7%, var(--branco));
}

.tribo-curso__publico-bloco--nao {
	border: 1px solid var(--chakra-sacral);
	background: var(--leite);
	background: color-mix(in srgb, var(--chakra-sacral) 7%, var(--branco));
}

.tribo-curso__publico-bloco--sim h2 { color: var(--chakra-cardiaco-texto); }
.tribo-curso__publico-bloco--nao h2 { color: var(--chakra-sacral-texto); }

.tribo-curso__fechamento { margin: 2rem 0 0; }

.tribo-curso__outros {
	margin-top: 2.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--linha);
}

.tribo-curso__outros-rotulo {
	margin: 0 0 .75rem;
	color: var(--silencio);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tribo-curso__outros ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tribo-curso__outros a {
	display: inline-block;
	padding: .4rem .8rem;
	border: 1px solid var(--linha);
	border-radius: 99px;
	background: var(--branco);
	color: var(--texto);
	font-size: var(--t-xs);
	text-decoration: none;
}

.tribo-curso__outros a:hover {
	border-color: var(--azul);
	color: var(--azul);
}

/* Sete entradas no menu nao cabem com 12px de respiro interno de cada lado:
   a soma passa da largura da faixa e, como a lista e centralizada, o excesso
   escorre pelos dois lados -- por cima da marca, do lado esquerdo. O respiro
   encolhe entre 1024 e 1600 e volta ao normal quando ha espaco. A separacao
   visivel entre os rotulos continua vindo do gap, que nao muda. */
@media (min-width: 64rem) {
	.tribo-topo__lista > li > a,
	.tribo-topo__grupo {
		padding-inline: clamp(5px, .5vw, 12px);
	}
}

/* ==========================================================================
   NUMEROLOGIA  --  03/09/2026
   Formulario de duas perguntas e o mapa numerologico.
   ========================================================================== */

.tribo-num-form {
	max-width: 34rem;
	margin: 0 auto 2rem;
	padding: 1.75rem;
	border: 1px solid var(--linha);
	border-radius: 1rem;
	background: var(--branco);
	box-shadow: 0 8px 26px rgba(17, 36, 65, .06);
}

.tribo-num-form__campo { margin-bottom: 1.25rem; }

.tribo-num-form__campo label {
	display: block;
	margin-bottom: .35rem;
	color: var(--titulo);
	font-size: var(--t-sm);
	font-weight: 700;
}

.tribo-num-form input {
	width: 100%;
	min-height: 3rem;
	padding: .6rem .85rem;
	border: 1px solid var(--campo-borda);
	border-radius: .45rem;
	background: var(--branco);
	color: var(--titulo);
	font: inherit;
	font-size: var(--t-base);
}

.tribo-num-form input:focus-visible {
	border-color: var(--azul);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px rgba(0, 74, 173, .16);
}

.tribo-num-form__dica {
	margin: .4rem 0 0;
	color: var(--silencio);
	font-size: var(--t-xs);
	line-height: 1.45;
}

.tribo-num-form__erro,
.tribo-num-form__erro-geral {
	margin: .4rem 0 0;
	color: var(--chakra-raiz-texto);
	font-size: var(--t-xs);
	font-weight: 600;
}

.tribo-num-form__erro-geral {
	margin: 0 0 1rem;
	padding: .7rem .9rem;
	border: 1px solid var(--chakra-raiz);
	border-radius: .35rem;
	background: var(--leite);
	background: color-mix(in srgb, var(--chakra-raiz) 8%, var(--branco));
	color: var(--chakra-raiz-texto);
	font-size: var(--t-sm);
}

.tribo-num-form .tribo-btn { width: 100%; }

.tribo-num-form__nota {
	margin: .85rem 0 0;
	color: var(--silencio);
	font-size: var(--t-xs);
	line-height: 1.45;
	text-align: center;
}

/* ------------------------------------------------------------ resultado -- */

.tribo-num { max-width: 47rem; margin-inline: auto; }

.tribo-num--perdida {
	padding: 1.5rem;
	border: 1px solid var(--linha);
	border-radius: .75rem;
	background: var(--leite);
	text-align: center;
}

.tribo-num__topo {
	margin-bottom: 1.75rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--linha);
}

.tribo-num__rotulo {
	margin: 0 0 .3rem;
	color: var(--azul);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.tribo-num__nome {
	margin: 0 0 .2rem;
	color: var(--titulo);
	font-size: var(--t-xl);
	line-height: 1.1;
}

.tribo-num__data {
	margin: 0;
	color: var(--silencio);
	font-size: var(--t-sm);
	font-variant-numeric: tabular-nums;
}

.tribo-num__principais,
.tribo-num__apoio {
	display: grid;
	gap: 1rem;
	margin-bottom: 1rem;
}

.tribo-num__apoio { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }

.tribo-num-cartao {
	padding: 1.35rem 1.5rem 1.5rem;
	border: 1px solid var(--linha);
	border-radius: .8rem;
	background: var(--branco);
}

/* Os tres numeros principais tem tratamento maior de proposito: sao eles que
   respondem a pergunta que trouxe a pessoa. Os de apoio vem depois, menores,
   e a hierarquia poupa a leitura de tratar tudo como igualmente importante. */


.tribo-num-cartao__posicao {
	margin: 0;
	color: var(--silencio);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.tribo-num-cartao__valor {
	display: flex;
	gap: .6rem;
	align-items: baseline;
	margin: .15rem 0 .1rem;
	color: var(--azul-escuro);
	font-size: 3rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.tribo-num__apoio .tribo-num-cartao__valor { font-size: 2.25rem; }

.tribo-num-cartao__mestre {
	padding: .2rem .55rem;
	border-radius: 99px;
	background: var(--acao-tenue);
	color: var(--azul);
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.tribo-num-cartao__titulo {
	margin: 0 0 .35rem;
	color: var(--titulo);
	font-size: var(--t-md);
}

.tribo-num-cartao__pergunta {
	margin: 0 0 .7rem;
	color: var(--silencio);
	font-size: var(--t-sm);
}

.tribo-num-cartao__essencia {
	margin: 0 0 .9rem;
	color: var(--texto);
	font-size: var(--t-base);
}

.tribo-num-cartao__par {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	gap: .75rem;
	margin: 0;
	padding-top: .85rem;
	border-top: 1px solid var(--linha-clara);
}

.tribo-num-cartao__par dt {
	margin-bottom: .15rem;
	color: var(--silencio);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.tribo-num-cartao__par dd {
	margin: 0;
	color: var(--texto);
	font-size: var(--t-sm);
}

.tribo-num-cartao__extra {
	margin: .8rem 0 0;
	color: var(--silencio);
	font-size: var(--t-xs);
}

/* ------------------------------------------------------------- blocos ---- */

.tribo-num__bloco {
	margin: 1.75rem 0;
	padding: 1.35rem 1.5rem;
	border-radius: .8rem;
	background: var(--leite);
}

.tribo-num__bloco h3 {
	margin: 0 0 .35rem;
	color: var(--titulo);
	font-size: var(--t-lg);
}

.tribo-num__bloco-lead {
	margin: 0 0 1rem;
	color: var(--silencio);
	font-size: var(--t-sm);
}

.tribo-num__licoes,
.tribo-num__desafios {
	display: grid;
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tribo-num__desafios { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }

.tribo-num__licoes li {
	display: flex;
	gap: .8rem;
	align-items: baseline;
	color: var(--texto);
	font-size: var(--t-sm);
}

.tribo-num__licao-valor,
.tribo-num__desafio-valor {
	display: inline-grid;
	flex: 0 0 1.8rem;
	place-items: center;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: var(--branco);
	color: var(--azul);
	font-size: var(--t-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.tribo-num__desafios li {
	padding: .9rem 1rem;
	border-radius: .5rem;
	background: var(--branco);
}

.tribo-num__desafio-topo {
	display: flex;
	gap: .7rem;
	align-items: center;
	margin: 0 0 .4rem;
	color: var(--titulo);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.tribo-num__desafios p:last-child {
	margin: 0;
	color: var(--texto);
	font-size: var(--t-sm);
}

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

.tribo-num__conta {
	margin: 1.75rem 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--linha);
	border-radius: .6rem;
	background: var(--branco);
	font-size: var(--t-sm);
}

.tribo-num__conta summary {
	color: var(--azul);
	font-weight: 700;
	cursor: pointer;
}

.tribo-num__conta[open] summary { margin-bottom: .85rem; }

.tribo-num__conta p { margin: 0 0 .75rem; color: var(--texto); }

.tribo-num__conta ul {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--texto);
}

.tribo-num__conta li { margin-bottom: .35rem; }

.tribo-num__limite {
	margin: 1.75rem 0;
	padding: 1.15rem 1.35rem;
	border-radius: .4rem;
	background: var(--acao-tenue);
	font-size: var(--t-sm);
}

.tribo-num__limite p { margin: 0; color: var(--texto); }

.tribo-num__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	margin: 2rem 0 0;
}

.tribo-num__refazer {
	color: var(--azul);
	font-size: var(--t-sm);
	font-weight: 600;
}

@media (max-width: 40rem) {
	.tribo-num-form { padding: 1.25rem; }
	.tribo-num-cartao { padding: 1.1rem 1.15rem 1.25rem; }
	.tribo-num-cartao__valor { font-size: 2.5rem; }
}

/* ==========================================================================
   TARO  --  03/09/2026
   Escolha da tiragem e a leitura das cartas.
   ========================================================================== */

.tribo-taro-form {
	max-width: 38rem;
	margin: 0 auto 2rem;
	padding: 1.75rem;
	border: 1px solid var(--linha);
	border-radius: 1rem;
	background: var(--branco);
	box-shadow: 0 8px 26px rgba(17, 36, 65, .06);
}

.tribo-taro-form__campo { margin-bottom: 1.5rem; }

.tribo-taro-form__campo label {
	display: block;
	margin-bottom: .35rem;
	color: var(--titulo);
	font-size: var(--t-sm);
	font-weight: 700;
}

.tribo-taro-form input[type="text"] {
	width: 100%;
	min-height: 3rem;
	padding: .6rem .85rem;
	border: 1px solid var(--campo-borda);
	border-radius: .45rem;
	background: var(--branco);
	color: var(--titulo);
	font: inherit;
	font-size: var(--t-base);
}

.tribo-taro-form input[type="text"]:focus-visible {
	border-color: var(--azul);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px rgba(0, 74, 173, .16);
}

.tribo-taro-form__tiragens {
	margin: 0 0 1.5rem;
	padding: 0;
	border: 0;
}

.tribo-taro-form__tiragens legend {
	margin-bottom: .6rem;
	padding: 0;
	color: var(--titulo);
	font-size: var(--t-sm);
	font-weight: 700;
}

.tribo-taro-opcao {
	display: flex;
	gap: .8rem;
	align-items: flex-start;
	margin-bottom: .6rem;
	padding: .9rem 1rem;
	border: 1px solid var(--linha);
	border-radius: .55rem;
	background: var(--papel);
	cursor: pointer;
}

.tribo-taro-opcao:hover { border-color: var(--azul-claro); }

/* :has esta em todos os navegadores atuais; onde nao estiver, o cartao so
   nao fica destacado -- o radio continua marcado e o formulario funciona. */
.tribo-taro-opcao:has(input:checked) {
	border-color: var(--azul);
	background: var(--acao-tenue);
}

.tribo-taro-opcao:has(input:focus-visible) {
	outline: 2px solid var(--azul);
	outline-offset: 2px;
}

.tribo-taro-opcao input {
	flex: 0 0 auto;
	margin-top: .2rem;
	accent-color: var(--azul);
}

.tribo-taro-opcao__corpo strong {
	display: block;
	color: var(--titulo);
	font-size: var(--t-base);
}

.tribo-taro-opcao__corpo small {
	display: block;
	margin-top: .15rem;
	color: var(--silencio);
	font-size: var(--t-xs);
	line-height: 1.45;
}

.tribo-taro-form .tribo-btn { width: 100%; }

/* ------------------------------------------------------------ resultado -- */

.tribo-taro { max-width: 52rem; margin-inline: auto; }

.tribo-taro--perdida {
	max-width: 34rem;
	padding: 1.5rem;
	border: 1px solid var(--linha);
	border-radius: .75rem;
	background: var(--leite);
	text-align: center;
}

.tribo-taro__topo {
	margin-bottom: 1.75rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--linha);
}

.tribo-taro__titulo {
	margin: 0 0 .6rem;
	color: var(--titulo);
	font-size: var(--t-xl);
	line-height: 1.1;
}

.tribo-taro__pergunta {
	margin: 0 0 .5rem;
	padding-left: 1rem;
	border-left: 2px solid var(--linha);
	color: var(--titulo);
	font-size: var(--t-md);
	font-style: italic;
}

.tribo-taro__quando {
	margin: 0;
	color: var(--silencio);
	font-size: var(--t-xs);
	font-variant-numeric: tabular-nums;
}

.tribo-taro__cartas {
	display: grid;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.tribo-taro__cartas--tres  { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.tribo-taro__cartas--cinco { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.tribo-taro__cartas--uma   { max-width: 24rem; margin-inline: auto; }

.tribo-carta {
	display: flex;
	flex-direction: column;
	padding: 1.1rem 1.2rem 1.3rem;
	border: 1px solid var(--linha);
	border-radius: .75rem;
	background: var(--branco);
}

.tribo-carta__posicao {
	margin: 0 0 .75rem;
	color: var(--silencio);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

/* O lugar da ilustracao. Enquanto a arte nao existe, o simbolo ocupa a mesma
   caixa -- quando a imagem chegar, entra aqui sem mexer no resto. */
.tribo-carta__figura {
	display: grid;
	place-items: center;
	aspect-ratio: 2 / 3;
	max-height: 11rem;
	margin: 0 auto .9rem;
	border: 1px solid var(--linha);
	border-radius: .5rem;
	background: var(--leite);
}

.tribo-carta__glifo {
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1;
}

.tribo-carta__figura--maior   .tribo-carta__glifo { color: var(--chakra-frontal-texto); }
.tribo-carta__figura--paus    .tribo-carta__glifo { color: var(--chakra-raiz-texto); }
.tribo-carta__figura--copas   .tribo-carta__glifo { color: var(--chakra-laringeo-texto); }
.tribo-carta__figura--espadas .tribo-carta__glifo { color: var(--chakra-sacral-texto); }
.tribo-carta__figura--ouros   .tribo-carta__glifo { color: var(--chakra-cardiaco-texto); }

/* Carta invertida aparece invertida: e a informacao mais rapida da tela. */
.tribo-carta--invertida .tribo-carta__glifo { transform: rotate(180deg); }

.tribo-carta__nome {
	margin: 0 0 .25rem;
	color: var(--titulo);
	font-size: var(--t-md);
	line-height: 1.2;
}

.tribo-carta__estado {
	display: inline-block;
	padding: .12rem .45rem;
	border-radius: 99px;
	background: var(--leite);
	color: var(--silencio);
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: middle;
}

.tribo-carta__chave {
	margin: 0 0 .6rem;
	color: var(--azul);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: lowercase;
}

.tribo-carta__texto {
	margin: 0;
	color: var(--texto);
	font-size: var(--t-sm);
}

@media (max-width: 40rem) {
	.tribo-taro-form { padding: 1.25rem; }
	.tribo-taro__cartas { grid-template-columns: 1fr; }
	.tribo-carta__figura { max-height: 9rem; }
}

/* ==========================================================================
   RUNAS  --  03/09/2026
   Mesma mecanica do taro, com 24 pedras e sem naipe.
   ========================================================================== */

.tribo-runas { max-width: 52rem; margin-inline: auto; }

.tribo-runas__tiragem {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.tribo-runa {
	display: flex;
	flex-direction: column;
	padding: 1.1rem 1.2rem 1.3rem;
	border: 1px solid var(--linha);
	border-radius: .75rem;
	background: var(--branco);
}

.tribo-runa__posicao {
	margin: 0 0 .75rem;
	color: var(--silencio);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.tribo-runa__figura {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	margin: 0 auto .9rem;
	border: 1px solid var(--linha);
	border-radius: .5rem;
	background: var(--leite);
	color: var(--chakra-frontal-texto);
	font-size: 2.4rem;
	line-height: 1;
}

.tribo-runa--invertida .tribo-runa__figura { transform: rotate(180deg); }

.tribo-runa__nome {
	margin: 0 0 .15rem;
	color: var(--titulo);
	font-size: var(--t-md);
}

.tribo-runa__som {
	margin: 0 0 .5rem;
	color: var(--silencio);
	font-size: var(--t-xs);
}

.tribo-runa__chave {
	margin: 0 0 .6rem;
	color: var(--azul);
	font-size: var(--t-xs);
	font-weight: 700;
}

.tribo-runa__texto {
	margin: 0;
	color: var(--texto);
	font-size: var(--t-sm);
}

.tribo-runa__aviso {
	margin: .5rem 0 0;
	color: var(--silencio);
	font-size: var(--t-xs);
	font-style: italic;
}

/* ==========================================================================
   MAPA COMPLETO  --  03/09/2026
   A trava dentro do resultado, e a pagina que a explica.
   ========================================================================== */

.tribo-tranca {
	margin: 2rem 0;
	padding: 1.5rem 1.6rem;
	border: 1px solid var(--linha);
	border-radius: .85rem;
	background: var(--leite);
}

.tribo-tranca__titulo {
	margin: 0 0 .4rem;
	color: var(--titulo);
	font-size: var(--t-lg);
}

.tribo-tranca__lead {
	margin: 0 0 1rem;
	color: var(--texto);
	font-size: var(--t-sm);
}

/* A lista mostra os titulos do que esta travado, nunca o texto. Ver o nome do
   que existe e informacao honesta; ver metade do paragrafo e isca. */
.tribo-tranca__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	gap: .4rem .9rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.tribo-tranca__lista li {
	padding: .45rem .7rem;
	border-radius: .35rem;
	background: var(--branco);
	color: var(--titulo);
	font-size: var(--t-sm);
}

.tribo-tranca__mais {
	color: var(--silencio) !important;
	font-style: italic;
}

.tribo-tranca__acao { margin: 0 0 .75rem; }

.tribo-tranca__nota {
	margin: 0;
	color: var(--silencio);
	font-size: var(--t-xs);
}

/* ------------------------------------------------------------- pagina ---- */

.tribo-completo { max-width: 47rem; margin-inline: auto; }

.tribo-completo__ativo {
	margin-bottom: 2rem;
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--chakra-cardiaco);
	border-radius: .45rem;
	background: var(--leite);
	background: color-mix(in srgb, var(--chakra-cardiaco) 7%, var(--branco));
	font-size: var(--t-sm);
}

.tribo-completo__ativo p { margin: 0 0 .9rem; color: var(--texto); }
.tribo-completo__ativo p:last-child { margin-bottom: 0; }

.tribo-completo__tabela-caixa {
	margin-bottom: 2.25rem;
	overflow-x: auto;
}

.tribo-completo__tabela {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-sm);
}

.tribo-completo__tabela caption {
	margin-bottom: .75rem;
	color: var(--silencio);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-align: left;
	text-transform: uppercase;
}

.tribo-completo__tabela th,
.tribo-completo__tabela td {
	padding: .8rem .9rem;
	border-bottom: 1px solid var(--linha);
	text-align: left;
	vertical-align: top;
}

.tribo-completo__tabela thead th {
	border-bottom: 2px solid var(--linha);
	color: var(--titulo);
	font-size: var(--t-xs);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.tribo-completo__tabela thead th:not(:first-child),
.tribo-completo__marca { width: 6rem; text-align: center; }

.tribo-completo__tabela tbody th strong {
	display: block;
	color: var(--titulo);
	font-weight: 700;
}

.tribo-completo__tabela tbody th span {
	display: block;
	margin-top: .15rem;
	color: var(--silencio);
	font-size: var(--t-xs);
	font-weight: 400;
}

.tribo-completo__sim { color: var(--chakra-cardiaco-texto); font-size: 1.1rem; font-weight: 700; }
.tribo-completo__nao { color: var(--silencio); }

.tribo-completo__itens {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	gap: 1rem;
	margin-bottom: 2.25rem;
}

.tribo-completo__item {
	padding: 1.2rem 1.3rem;
	border: 1px solid var(--linha);
	border-radius: .7rem;
	background: var(--branco);
}

.tribo-completo__item h3 {
	margin: 0 0 .4rem;
	color: var(--titulo);
	font-size: var(--t-md);
}

.tribo-completo__item p {
	margin: 0;
	color: var(--texto);
	font-size: var(--t-sm);
}

.tribo-completo__chamada {
	padding: 1.75rem;
	border-radius: .9rem;
	background: var(--acao-tenue);
	text-align: center;
}

.tribo-completo__chamada h2 {
	margin: 0 0 .5rem;
	color: var(--titulo);
	font-size: var(--t-lg);
}

.tribo-completo__chamada p {
	margin: 0 auto 1.25rem;
	max-width: 34rem;
	color: var(--texto);
	font-size: var(--t-sm);
}

.tribo-completo__botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: center;
	margin-bottom: 0 !important;
}

.tribo-completo__gratis {
	color: var(--azul);
	font-size: var(--t-sm);
	font-weight: 600;
}

/* ==========================================================================
   HOME  --  grade de ferramentas  --  03/09/2026
   ========================================================================== */

#tribo-home .tribo-home__secao--ferramentas { background: var(--branco); }

#tribo-home .tribo-home__ferramentas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	gap: .85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

#tribo-home .tribo-home__ferramenta a {
	display: flex;
	gap: .9rem;
	align-items: flex-start;
	height: 100%;
	padding: 1.1rem 1.2rem;
	border: 1px solid var(--linha);
	border-radius: .7rem;
	background: var(--papel);
	color: var(--titulo);
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

#tribo-home .tribo-home__ferramenta a:hover {
	transform: translateY(-3px);
	border-color: var(--azul-claro);
	box-shadow: var(--home-sombra-leve);
}

#tribo-home .tribo-home__ferramenta-glifo {
	display: grid;
	flex: 0 0 2.6rem;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: var(--branco);
	box-shadow: 0 2px 8px rgba(17, 36, 65, .07);
	color: var(--azul);
	font-size: 1.15rem;
	line-height: 1;
}

#tribo-home .tribo-home__ferramenta-corpo { flex: 1 1 auto; min-width: 0; }

#tribo-home .tribo-home__ferramenta-corpo strong {
	display: block;
	font-size: var(--t-base);
}

#tribo-home .tribo-home__ferramenta-corpo small {
	display: block;
	margin-top: .2rem;
	color: var(--silencio);
	font-size: var(--t-xs);
	line-height: 1.45;
}

/* A etiqueta e a informacao que decide o clique: diz se custa, e diz quando
   a ferramenta ainda nao existe. Por isso ela e legivel, e nao um adorno. */
#tribo-home .tribo-home__ferramenta-selo {
	flex: 0 0 auto;
	align-self: flex-start;
	padding: .2rem .55rem;
	border-radius: 99px;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
}

#tribo-home .tribo-home__ferramenta--gratis .tribo-home__ferramenta-selo {
	background: #E6F2EB;
	color: var(--chakra-cardiaco-texto);
}

#tribo-home .tribo-home__ferramenta--assinatura .tribo-home__ferramenta-selo {
	background: var(--acao-tenue);
	color: var(--azul);
}

#tribo-home .tribo-home__ferramenta--breve .tribo-home__ferramenta-selo {
	background: var(--leite);
	color: var(--silencio);
}

#tribo-home .tribo-home__ferramenta--breve a { background: var(--leite); }

#tribo-home .tribo-home__ferramenta--breve .tribo-home__ferramenta-glifo {
	color: var(--silencio);
}

@media (max-width: 40rem) {
	#tribo-home .tribo-home__ferramentas { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SINASTRIA  --  04/09/2026
   Dois formularios lado a lado, e a leitura dos contatos entre dois mapas.
   ========================================================================== */

.tribo-dupla-form { max-width: 46rem; }

.tribo-dupla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.tribo-dupla__lado {
	margin: 0;
	padding: 1.1rem 1.2rem 1.2rem;
	border: 1px solid var(--linha);
	border-radius: .65rem;
	background: var(--papel);
}

.tribo-dupla__lado legend {
	padding: 0 .4rem;
	color: var(--azul);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.tribo-dupla__lado .tribo-num-form__campo:last-child { margin-bottom: 0; }

/* O campo de cidade precisa ancorar a lista de sugestoes. */
.tribo-cidade { position: relative; }

.tribo-cidade .tribo-suggest {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	max-height: 14rem;
	margin: .2rem 0 0;
	padding: 0;
	overflow-y: auto;
	border: 1px solid var(--linha);
	border-radius: .45rem;
	background: var(--branco);
	box-shadow: 0 10px 28px rgba(17, 36, 65, .12);
	list-style: none;
}

.tribo-cidade .tribo-suggest li {
	padding: .55rem .75rem;
	color: var(--titulo);
	font-size: var(--t-sm);
	cursor: pointer;
}

.tribo-cidade .tribo-suggest li:hover,
.tribo-cidade .tribo-suggest li.is-ativo {
	background: var(--acao-tenue);
	color: var(--azul-escuro);
}

/* ------------------------------------------------------------ resultado -- */

.tribo-sinastria { max-width: 47rem; margin-inline: auto; }

.tribo-sinastria__topo {
	margin-bottom: 1.75rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--linha);
}

.tribo-sinastria__titulo {
	margin: 0 0 1.1rem;
	color: var(--titulo);
	font-size: var(--t-xl);
	line-height: 1.1;
}

.tribo-sinastria__pessoas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: 1rem;
}

.tribo-sinastria__pessoa {
	padding: .9rem 1.1rem;
	border-radius: .6rem;
	background: var(--leite);
}

.tribo-sinastria__pessoa h3 {
	margin: 0 0 .5rem;
	color: var(--titulo);
	font-size: var(--t-md);
}

.tribo-sinastria__pessoa dl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(6rem, 100%), 1fr));
	gap: .5rem;
	margin: 0;
}

.tribo-sinastria__pessoa dt {
	color: var(--silencio);
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.tribo-sinastria__pessoa dd {
	margin: .1rem 0 0;
	color: var(--titulo);
	font-size: var(--t-sm);
}

.tribo-sinastria__sem { color: var(--silencio) !important; font-style: italic; }

.tribo-sinastria__contatos {
	display: grid;
	gap: .9rem;
	margin-bottom: 1.75rem;
}

.tribo-sinastria__contato {
	padding: 1.15rem 1.3rem;
	border: 1px solid var(--linha);
	border-radius: .65rem;
	background: var(--branco);
}

/* A cor da barra diz o angulo: o que funde, o que atrita, o que flui. E a
   informacao que a pessoa procura primeiro ao correr os olhos pela lista. */
.tribo-sinastria__contato--conjuncao  { border-left-color: var(--chakra-frontal); }
.tribo-sinastria__contato--oposicao   { border-left-color: var(--chakra-sacral); }
.tribo-sinastria__contato--quadratura { border-left-color: var(--chakra-raiz); }
.tribo-sinastria__contato--trigono    { border-left-color: var(--chakra-cardiaco); }
.tribo-sinastria__contato--sextil     { border-left-color: var(--chakra-laringeo); }

.tribo-sinastria__par {
	margin: 0 0 .2rem;
	color: var(--titulo);
	font-size: var(--t-md);
	font-weight: 700;
}

.tribo-sinastria__orbe {
	margin: 0 0 .7rem;
	color: var(--silencio);
	font-size: var(--t-xs);
	font-variant-numeric: tabular-nums;
}

.tribo-sinastria__sobre {
	margin: 0 0 .55rem;
	color: var(--texto);
	font-size: var(--t-base);
}

.tribo-sinastria__angulo {
	margin: 0;
	padding-top: .55rem;
	border-top: 1px solid var(--linha-clara);
	color: var(--texto);
	font-size: var(--t-sm);
}

.tribo-sinastria__vazio {
	margin: 0 0 1.75rem;
	padding: 1.25rem 1.4rem;
	border-radius: .6rem;
	background: var(--leite);
	color: var(--texto);
	font-size: var(--t-sm);
}

/* ==========================================================================
   MAPA DO ANO  --  04/09/2026
   ========================================================================== */

.tribo-ano { max-width: 47rem; margin-inline: auto; }

.tribo-ano__topo {
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--linha);
}

.tribo-ano__titulo {
	margin: 0 0 .4rem;
	color: var(--titulo);
	font-size: var(--t-xl);
	line-height: 1.1;
}

.tribo-ano__instante {
	margin: 0 0 .2rem;
	color: var(--azul-escuro);
	font-size: var(--t-md);
	font-variant-numeric: tabular-nums;
}

.tribo-ano__lugar {
	margin: 0;
	color: var(--silencio);
	font-size: var(--t-sm);
}

.tribo-ano__roda {
	max-width: 26rem;
	margin: 0 auto 1.75rem;
}

.tribo-ano__roda svg { width: 100%; height: auto; }

.tribo-ano__blocos {
	display: grid;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.tribo-ano__bloco {
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--linha);
	border-radius: .7rem;
	background: var(--branco);
}

.tribo-ano__rotulo {
	margin: 0 0 .2rem;
	color: var(--silencio);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.tribo-ano__bloco h3 {
	margin: 0 0 .5rem;
	color: var(--titulo);
	font-size: var(--t-lg);
}

.tribo-ano__bloco p:last-child {
	margin: 0;
	color: var(--texto);
	font-size: var(--t-base);
}

.tribo-ano__tabela-caixa {
	margin-bottom: 1.75rem;
	overflow-x: auto;
}

/* O select do ano segue os outros campos do formulario. */
.tribo-num-form select {
	width: 100%;
	min-height: 3rem;
	padding: .6rem .85rem;
	border: 1px solid var(--campo-borda);
	border-radius: .45rem;
	background: var(--branco);
	color: var(--titulo);
	font: inherit;
	font-size: var(--t-base);
}

.tribo-num-form select:focus-visible {
	border-color: var(--azul);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px rgba(0, 74, 173, .16);
}

/* ==========================================================================
   AJUSTES DE INTERFACE  --  04/09/2026
   Auditoria de acessibilidade, responsivo e coerencia visual.
   ========================================================================== */

/* --- 1. Token de borda de campo -------------------------------------------
   O cinza anterior tinha 1,48 de contraste com o branco. A WCAG 1.4.11 pede
   3:1 para a borda que identifica um campo de formulario -- sem ela, o campo
   so existe para quem enxerga bem. */
:root { --campo-borda: #828EA0; }

/* --- 2. As barras coloridas na lateral -------------------------------------
   Estavam em toda caixa da pagina, cada uma numa cor, sem que a cor dissesse
   nada. Recurso repetido assim para de significar e achata a hierarquia:
   quando tudo tem destaque, nada tem.
   Ficam onde a cor carrega informacao -- erro, sucesso, aviso de saude, o
   angulo de um aspecto -- e saem do resto. */
/* As notas de honestidade nao sao cartoes: sao apartes. Ficam sobre o fundo
   da pagina, separadas por uma regra, com o texto um pouco menor. */
.tribo-num__limite,
.tribo-cursos__aviso {
	padding: 1.1rem 0 0;
	border: 0;
	border-top: 1px solid var(--linha);
	border-radius: 0;
	background: none;
	color: var(--silencio);
}

.tribo-num__limite p,
.tribo-cursos__aviso { color: var(--silencio); }
.tribo-num__limite strong { color: var(--texto); }

/* O aviso das terapias e o unico que continua com cor: ele fala de saude, e
   e a informacao mais importante da pagina para quem chega procurando
   tratamento. Vira um aviso de verdade -- fundo e borda inteiros -- em vez de
   mais um cartao com faixa. */
.tribo-terapia__aviso {
	border: 1px solid #E8C9C7;
	border-left-width: 1px;
	border-radius: .5rem;
	background: #FBF3F2;
}

/* Os tres numeros principais ja se distinguem pelo tamanho: o valor deles e
   3rem contra 2,25rem dos de apoio. A faixa azul era redundante. */
.tribo-num__principais .tribo-num-cartao {
	border-color: var(--linha);
	box-shadow: 0 2px 10px rgba(17, 36, 65, .05);
}

/* Regra de citacao: convencao tipografica, nao enfeite. Fica, mais fina. */
.tribo-post-single__conteudo blockquote,
.tribo-taro__pergunta {
	border-left-width: 2px;
	border-left-color: var(--linha);
}

/* --- 3. Alvos de toque -----------------------------------------------------
   Links de titulo e de acao dentro de cartoes tinham 22 a 28px de altura no
   celular. A recomendacao e 44px, e a diferenca aparece em quem tem a mao
   grande, o dedo tremido, ou esta andando. O alvo cresce sem que o texto
   mude de tamanho: o padding faz o trabalho. */
@media (max-width: 62rem) {
	#tribo-home .tribo-home__caminho h3 a,
	.tribo-curso-cartao h3 a,
	.tribo-terapia-cartao h3 a,
	.tribo-terapia__outras a,
	.tribo-curso__outros a,
	.tribo-cartao__conta a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	#tribo-home .tribo-home__caminho-corpo,
	.tribo-curso-cartao,
	.tribo-terapia-cartao { padding-block: .75rem 1rem; }
}

/* A caixa de "nao sei a hora exata" tinha 20x20. O rotulo inteiro vira alvo. */
.tribo-campo--marca label,
.tribo-app label:has(input[type="checkbox"]) {
	display: inline-flex;
	gap: .55rem;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
}

.tribo-app input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--azul);
}

/* --- 4. Movimento ----------------------------------------------------------
   Quem pede menos movimento no sistema recebe menos movimento -- sem matar a
   mudanca de estado, que continua acontecendo, so que instantanea. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	/* O que se movia por transform passa a mudar so a sombra: o feedback
	   sobrevive sem deslocamento na tela. */
	#tribo-home .tribo-home__caminho:hover,
	#tribo-home .tribo-home__signo:hover,
	#tribo-home .tribo-home__ferramenta a:hover {
		transform: none;
	}
}

/* --- 5. Foco visivel -------------------------------------------------------
   Um contorno so, coerente, em tudo que recebe foco por teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--azul);
	outline-offset: 2px;
	border-radius: 3px;
}

/* --- 6. Imagem do heroi no celular -----------------------------------------
   A imagem de fundo do heroi tem 1600px de largura. Num telefone de 390px
   isso e quatro vezes mais pixel do que a tela usa. O corte de 1024 pesa
   33KB contra 67KB do inteiro -- e o PNG original, antes do webp, pesava
   1,6MB. */
@media (max-width: 46rem) {
	/* !important porque o shortcode escreve a imagem num `style`
	   embutido, e estilo embutido vence qualquer folha. Sem isto o
	   telefone baixava os 67KB da imagem inteira em vez dos 33KB
	   do corte -- a regra existia e nunca valeu. */
	#tribo-home .tribo-home__heroi {
		background-image: url("/wp-content/uploads/2026/09/hero-1024x576.webp") !important;
	}
}

/* ==========================================================================
   MAPA PROFISSIONAL  --  04/09/2026
   Reaproveita a estrutura de blocos do mapa do ano; muda o que cada um diz.
   ========================================================================== */

.tribo-voc { max-width: 47rem; margin-inline: auto; }

.tribo-voc__bloco {
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--linha);
	border-radius: .7rem;
	background: var(--branco);
}

.tribo-voc__bloco h3 {
	margin: 0 0 .5rem;
	color: var(--titulo);
	font-size: var(--t-lg);
}

.tribo-voc__chamada {
	margin: 0 0 .6rem;
	color: var(--azul-escuro);
	font-size: var(--t-md);
	font-weight: 600;
}

.tribo-voc__bloco > p:last-child {
	margin: 0;
	color: var(--texto);
	font-size: var(--t-base);
}

.tribo-voc__ocupante {
	padding-top: .9rem;
	margin-top: .9rem;
	border-top: 1px solid var(--linha-clara);
}

.tribo-voc__ocupante:first-of-type {
	padding-top: 0;
	margin-top: 0;
	border-top: 0;
}

.tribo-voc__ocupante h4 {
	margin: 0 0 .3rem;
	color: var(--titulo);
	font-size: var(--t-md);
}

.tribo-voc__ocupante p {
	margin: 0;
	color: var(--texto);
	font-size: var(--t-sm);
}

.tribo-voc__lista {
	margin-top: .4rem !important;
	color: var(--silencio) !important;
	font-size: var(--t-xs) !important;
}

/* A saida alternativa da trava: quem nao vai comprar aquele mapa avulso ainda
   precisa achar a assinatura, mas ela nao disputa peso com a acao principal. */
.tribo-tranca__acao {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.tribo-tranca__alternativa {
	color: var(--azul);
	font-size: var(--t-sm);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Os dois caminhos da pagina do mapa completo, lado a lado. */
.tribo-completo__opcoes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: 1rem;
	margin-bottom: 1.25rem;
	text-align: left;
}

.tribo-completo__opcao {
	display: flex;
	flex-direction: column;
	padding: 1.35rem 1.4rem 1.5rem;
	border: 1px solid var(--linha);
	border-radius: .7rem;
	background: var(--branco);
}

.tribo-completo__preco {
	margin: 0 0 .1rem !important;
	color: var(--azul-escuro);
	font-size: var(--t-xl);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.tribo-completo__opcao h3 {
	margin: 0 0 .5rem;
	color: var(--titulo);
	font-size: var(--t-md);
}

.tribo-completo__opcao p {
	flex: 1 1 auto;
	margin: 0 0 1rem !important;
	max-width: none !important;
	color: var(--texto);
	font-size: var(--t-sm);
}

.tribo-completo__opcao .tribo-btn { align-self: flex-start; }

.tribo-completo__antes { margin: 0 !important; }

/* ==========================================================================
   ICONES  --  04/09/2026
   Um jogo desenhado, no lugar dos caracteres Unicode que faziam esse papel.
   Todos no mesmo quadrado de 24, mesmo traco, cor por currentColor.
   ========================================================================== */

.tribo-icone {
	display: block;
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 auto;
}

/* --- os tres pontos do heroi --------------------------------------------- */

#tribo-home .tribo-home__ponto .tribo-icone {
	width: 1rem;
	height: 1rem;
}

/* --- os circulos da faixa de atalhos -------------------------------------
   Estavam vazios: o span so tinha cor de fundo, sem nada dentro. */
#tribo-home .tribo-home__atalho-icone {
	display: grid;
	place-items: center;
}

#tribo-home .tribo-home__atalho-icone .tribo-icone {
	width: 1.35rem;
	height: 1.35rem;
}

#tribo-home .tribo-home__atalho-icone--roxo    { color: var(--chakra-frontal-texto); }
#tribo-home .tribo-home__atalho-icone--laranja { color: var(--chakra-sacral-texto); }
#tribo-home .tribo-home__atalho-icone--verde   { color: var(--chakra-cardiaco-texto); }
#tribo-home .tribo-home__atalho-icone--rosa    { color: var(--chakra-coronario); }

/* --- a grade de ferramentas ---------------------------------------------- */

#tribo-home .tribo-home__ferramenta-glifo .tribo-icone {
	width: 1.3rem;
	height: 1.3rem;
}

/* --- os tres pilares ------------------------------------------------------ */

#tribo-home .tribo-home__pilar-icone {
	display: block;
	font-size: 0;
}

#tribo-home .tribo-home__pilar-icone .tribo-icone {
	width: 1.6rem;
	height: 1.6rem;
}

/* ==========================================================================
   ABAS DO CARTAO  --  04/09/2026
   A aba inativa vinha com fundo escuro e a ativa branca, o que inverte a
   leitura: numa fileira de duas, a mais escura e lida como a escolhida. O
   formulario aberto era o da aba clara, e a escura parecia a selecionada.
   Agora as duas ficam no mesmo tom e a ativa se marca por cor e sublinhado,
   que e como a referencia faz.
   ========================================================================== */

html .tribo-cartao .tribo-aba {
	background: var(--leite);
	color: var(--tinta-suave);
}

html .tribo-cartao .tribo-aba--ativa {
	border-bottom-color: var(--azul);
	background: var(--branco);
	color: var(--azul);
}

html .tribo-cartao .tribo-aba:hover:not(.tribo-aba--ativa) {
	background: var(--areia);
	color: var(--tinta);
}

html .tribo-cartao .tribo-aba:focus-visible {
	outline: 2px solid var(--azul);
	outline-offset: -3px;
}

/* ==========================================================================
   ALINHAMENTO DA HOME  --  04/09/2026
   ========================================================================== */

/* A grade de ferramentas encostava na esquerda: 'margin: 0' na lista anulava
   o 'margin-inline: auto' que centraliza todo o resto da pagina. Ela ficava
   43px fora do prumo das outras secoes. */
#tribo-home .tribo-home__ferramentas {
	margin-inline: auto;
}

/* Os quatro caminhos corriam em 928px enquanto o resto da pagina corre em
   1180. Dois blocos de largura diferente, um embaixo do outro, leem como
   erro mesmo quando sao intencionais. */
#tribo-home .tribo-home__caminhos {
	max-width: none;
}

/* As dez ferramentas ficavam com duas alturas: 107px onde a descricao cabia
   em duas linhas, 126px onde ia para tres. Dentro de uma fileira o grid ja
   iguala, mas entre fileiras nao -- e a grade lia como irregular. Reservar as
   duas linhas iguala tudo sem forcar altura no cartao. */
#tribo-home .tribo-home__ferramenta-corpo small {
	min-height: 2.6em;
}

@media (max-width: 40rem) {
	#tribo-home .tribo-home__ferramenta-corpo small { min-height: 0; }
}

/* ==========================================================================
   RODAPE  --  04/09/2026

   Dois problemas, e o segundo era consequencia do primeiro.

   O rodape corria em 1080px com 48px de respiro de cada lado, o que deixava
   o miolo em 984 -- enquanto todo o conteudo da pagina corre em 1180. Nada
   no rodape alinhava com nada acima dele.

   Dentro desses 984, o bloco de links recebia 2,4 de 5,25 partes: 417px para
   quatro colunas, ou 86px cada. "Mapa astral gratis" nao cabe em 86px, entao
   todo rotulo de duas palavras quebrava em duas ou tres linhas -- as colunas
   ficaram com 363, 314, 191 e 163px de altura, desencontradas. Era isso que
   se via como bagunca.

   A correcao e de sistema: mesma coluna da pagina, e os links em fileira
   propria, onde cabem inteiros.
   ========================================================================== */

html .tribo-rodape {
	width: min(100% - 2.5rem, 1180px);
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;
}

/* Marca e novidades dividem a primeira fileira; os links ficam com a largura
   inteira na segunda. Assim cada coluna de link passa de 86 para cerca de
   270px, e nenhum rotulo quebra. */
html .tribo-rodape__topo {
	grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
	grid-template-areas:
		"marca novidades"
		"links links";
	gap: 2.75rem 3rem;
	padding-block: 3.5rem 2.5rem;
}

html .tribo-rodape__marca     { grid-area: marca; max-width: 30rem; }
html .tribo-rodape__novidades { grid-area: novidades; }
html .tribo-rodape__colunas   { grid-area: links; }

html .tribo-rodape__colunas {
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
	gap: 2rem 2.5rem;
	padding-top: 2.25rem;
	border-top: 1px solid var(--linha);
}

/* Rotulo de coluna: mais respiro embaixo do que em cima do primeiro link,
   para o grupo ler como grupo. */
html .tribo-rodape__titulo {
	margin-bottom: .85rem;
	font-size: .72rem;
	letter-spacing: .1em;
}

html .tribo-rodape__colunas li { margin-bottom: .3rem; }

html .tribo-rodape__colunas li a {
	display: inline-block;
	padding-block: .3rem;
	font-size: var(--t-sm);
	line-height: 1.35;
}

/* A base fecha com regra de 1px de verdade -- a anterior saia em 0,7px e
   sumia em tela comum. */
html .tribo-rodape__base {
	border-top: 1px solid var(--linha);
	padding-block: 1.5rem;
}

html .tribo-rodape__novidades .tribo-rodape__titulo { margin-bottom: .5rem; }

html .tribo-rodape__form input { min-height: 2.75rem; }

html .tribo-rodape__form button {
	min-height: 2.75rem;
	padding-inline: 1.1rem;
	white-space: nowrap;
}

@media (max-width: 62rem) {
	html .tribo-rodape__topo {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"marca"
			"novidades"
			"links";
		gap: 2rem;
	}

	html .tribo-rodape__marca { max-width: none; }
}

@media (max-width: 40rem) {
	html .tribo-rodape__colunas {
		grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
		gap: 1.5rem;
	}
}

/* O contentor do Elementor que embrulha o rodape tem 48px de respiro de cada
   lado e trava o miolo em 1200 -- o que dava 1169px, contra os 1180 em que a
   pagina corre. Onze pixels de largura e vinte e cinco de posicao: pouco para
   nomear, o bastante para o rodape nunca encostar na coluna de cima.
   A especificidade precisa vencer a que o proprio Elementor gera. */
html body .elementor-location-footer .e-con.e-parent {
	padding-inline: 1.25rem;
}

html body .elementor-location-footer .e-con-inner {
	max-width: 1180px;
}

html body .tribo-rodape {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* O topo tinha o mesmo desencontro do rodape: 1169px em x=48, contra os 1180
   em x=43 do conteudo. Com o rodape corrigido, o topo virava o unico fora do
   prumo -- e o desalinhamento de uma barra so e mais visivel que o de todas. */
html body .elementor-location-header .e-con.e-parent {
	padding-inline: 1.25rem;
}

html body .elementor-location-header .e-con-inner {
	max-width: 1180px;
}

@media (min-width: 64rem) {
	html body .tribo-topo {
		width: 100%;
		max-width: none;
		padding-inline: 0;
	}
}

/* ==========================================================================
   LOGOTIPO  --  04/09/2026
   A marca e um traco de pincel com o espectro dos chakras -- o mesmo que ja
   assina o topo do cartao e do rodape. Ela nao ganha borda, sombra nem fundo:
   o desenho ja tem contorno proprio.
   ========================================================================== */

html .tribo-topo__logo {
	display: block;
	width: auto;
	height: 44px;
	max-width: 100%;
}

html .tribo-topo__marca {
	flex: 0 0 auto;
	line-height: 0;
}

html .tribo-rodape__nome--logo {
	margin-bottom: 1rem;
	line-height: 0;
}

html .tribo-rodape__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 15rem;
}

@media (max-width: 62rem) {
	html .tribo-topo__logo { height: 38px; }
}

@media (max-width: 40rem) {
	html .tribo-topo__logo { height: 34px; }
	html .tribo-rodape__logo { max-width: 13rem; }
}

/* No celular o logotipo saia com 38px de largura em vez de 153: a coluna da
   marca no grid do topo encolhia abaixo do conteudo para caber o botao ao
   lado, e 'width: auto' obedecia. Largura declarada resolve a disputa, e
   object-fit garante que a arte nunca distorca mesmo se a caixa apertar. */
html .tribo-topo__logo {
	width: 198px;
	height: 44px;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}

@media (max-width: 62rem) {
	html .tribo-topo__logo { width: 171px; height: 38px; }
}

@media (max-width: 40rem) {
	html .tribo-topo__logo { width: 153px; height: 34px; }
}

/* No telefone o topo pedia 350px so para o botao "Fazer meu mapa" (103), a
   busca (44), a conta (44) e os vaos -- e sobravam 38 para a marca, que era
   por isso que o logotipo saia esmagado. A regra de max-width tambem trabalhava
   contra: 100% de uma coluna de 38px vence uma largura declarada de 153.
   O botao sai da barra nessa largura. Ele repete uma acao que ja esta logo
   abaixo, como primeiro item da faixa de atalhos e como o proprio formulario
   do heroi -- na mesma tela, sem rolar. A marca, a busca e a conta ficam. */
@media (max-width: 40rem) {
	/* Esta regra dizia `max-content auto`, e era ela que vencia a do bloco
	   de 980px -- por vir depois e por ter o `html` na frente. O objetivo
	   era so impedir que a coluna da marca fosse espremida a 38px; a conta
	   e a mesma, mas com largura declarada em vez de conteudo. */
	html .tribo-topo {
		--tribo-logo-largura: 153px;

		grid-template-columns: var(--tribo-logo-largura) minmax(0, 1fr);
	}

	html .tribo-topo__logo {
		width: var(--tribo-logo-largura, 153px);
		max-width: none;
	}

	html .tribo-topo__acoes > .tribo-topo__cta {
		display: none;
	}
}

/* ==========================================================================
   ECOSSISTEMA  --  04/09/2026
   As dez frentes do projeto. O estado de cada uma e informacao, nao enfeite:
   diz se da para clicar agora, se acontece fora do site, ou se ainda vai
   abrir aqui dentro.
   ========================================================================== */

.tribo-ecossistema__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tribo-frente > a,
.tribo-frente__caixa {
	display: flex;
	gap: .9rem;
	align-items: flex-start;
	height: 100%;
	padding: 1.05rem 1.15rem;
	border: 1px solid var(--linha);
	border-radius: .7rem;
	background: var(--branco);
	color: var(--titulo);
	text-decoration: none;
}

.tribo-frente > a {
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.tribo-frente > a:hover {
	transform: translateY(-3px);
	border-color: var(--azul-claro);
	box-shadow: 0 8px 26px rgba(17, 36, 65, .08);
}

.tribo-frente__icone {
	display: grid;
	flex: 0 0 2.5rem;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--leite);
	color: var(--azul);
}

.tribo-frente__icone .tribo-icone {
	width: 1.25rem;
	height: 1.25rem;
}

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

.tribo-frente__corpo strong {
	display: block;
	font-size: var(--t-base);
}

.tribo-frente__corpo small {
	display: block;
	margin-top: .2rem;
	min-height: 2.6em;
	color: var(--silencio);
	font-size: var(--t-xs);
	line-height: 1.45;
}

.tribo-frente__estado {
	flex: 0 0 auto;
	align-self: flex-start;
	padding: .2rem .55rem;
	border-radius: 99px;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tribo-frente--aqui  .tribo-frente__estado { background: #E6F2EB; color: var(--chakra-cardiaco-texto); }
.tribo-frente--fora  .tribo-frente__estado { background: var(--acao-tenue); color: var(--azul); }
.tribo-frente--abrir .tribo-frente__estado { background: var(--leite); color: var(--silencio); }

.tribo-frente--abrir .tribo-frente__caixa,
.tribo-frente--fora .tribo-frente__caixa { background: var(--papel); }

.tribo-frente--abrir .tribo-frente__icone { color: var(--silencio); }

@media (max-width: 40rem) {
	.tribo-ecossistema__grade { grid-template-columns: 1fr; }
	.tribo-frente__corpo small { min-height: 0; }
}

/* --- a pagina institucional ---------------------------------------------- */

.tribo-fundador {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: 1.5rem 2.5rem;
	align-items: start;
	margin-bottom: 2.5rem;
}

.tribo-fundador__texto p { margin-bottom: 1rem; }
.tribo-fundador__texto p:last-child { margin-bottom: 0; }

.tribo-selo {
	padding: 1.35rem 1.5rem;
	border-radius: .8rem;
	background: var(--leite);
}

.tribo-selo dt {
	color: var(--silencio);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tribo-selo dd {
	margin: .15rem 0 1rem;
	color: var(--titulo);
	font-size: var(--t-md);
}

.tribo-selo dd:last-child { margin-bottom: 0; }

/* O selo de estado passou para a linha do titulo. Com ele ao lado do bloco
   inteiro, sobravam 170px para a descricao e as frases de sessenta caracteres
   iam para tres linhas -- os cartoes saiam com quatro alturas diferentes. */
.tribo-frente__topo {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem .55rem;
	align-items: baseline;
	justify-content: space-between;
}

.tribo-frente__topo strong { flex: 1 1 auto; }
.tribo-frente__estado { align-self: baseline; }

/* ==========================================================================
   TRIBO DAS ESTRELAS TV  --  04/09/2026
   Um video em destaque e tres menores ao lado. A capa vira player no clique:
   o script do YouTube nao entra em quem so passou os olhos.
   ========================================================================== */

.tribo-tv__topo { margin-bottom: 1.5rem; }

.tribo-tv__lead {
	max-width: 44rem;
	margin: 0;
	color: var(--silencio);
	font-size: var(--t-base);
}

.tribo-tv__grade {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.tribo-tv__lista {
	display: grid;
	align-content: start;
	gap: .9rem;
}

/* --- o video ------------------------------------------------------------- */

.tribo-tv__capa {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: .75rem;
	background: #071F40;
}

.tribo-tv__capa img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.tribo-tv__capa:hover img { transform: scale(1.03); }

.tribo-tv__quadro {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* O botao de play e o mesmo icone da grade de frentes, num circulo claro. */
.tribo-tv__play {
	position: absolute;
	display: grid;
	place-items: center;
	inset: 50% auto auto 50%;
	width: 3.25rem;
	height: 3.25rem;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--azul);
	box-shadow: 0 6px 20px rgba(7, 31, 64, .3);
	transition: transform .25s ease, background .25s ease;
}

.tribo-tv__capa:hover .tribo-tv__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: #fff;
}

.tribo-tv__play .tribo-icone { width: 1.5rem; height: 1.5rem; }

.tribo-tv__selo,
.tribo-tv__duracao {
	position: absolute;
	padding: .15rem .45rem;
	border-radius: .3rem;
	background: rgba(7, 31, 64, .82);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: .03em;
}

.tribo-tv__selo { inset: .5rem auto auto .5rem; text-transform: uppercase; }
.tribo-tv__duracao { inset: auto .5rem .5rem auto; }

.tribo-tv__titulo {
	margin: .55rem 0 0;
	color: var(--titulo);
	font-size: var(--t-sm);
	font-weight: 600;
	line-height: 1.35;

	/* Tres linhas no destaque, duas nos menores: o titulo do YouTube costuma
	   ser longo e sem corte a coluna da direita cresce mais que o destaque. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tribo-tv__video--destaque .tribo-tv__titulo {
	-webkit-line-clamp: 3;
	font-size: var(--t-md);
}

.tribo-tv__video--destaque .tribo-tv__play {
	width: 4.25rem;
	height: 4.25rem;
}

.tribo-tv__video--destaque .tribo-tv__play .tribo-icone {
	width: 2rem;
	height: 2rem;
}

.tribo-tv__saida { margin: 0; }

/* Os menores em duas colunas: capa a esquerda, titulo a direita. */
@media (min-width: 48rem) {
	.tribo-tv__lista .tribo-tv__video {
		display: grid;
		grid-template-columns: 9.5rem minmax(0, 1fr);
		gap: .75rem;
		align-items: start;
	}

	.tribo-tv__lista .tribo-tv__titulo { margin-top: 0; }
}

@media (max-width: 62rem) {
	.tribo-tv__grade { grid-template-columns: 1fr; }

	.tribo-tv__lista {
		grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	}

	.tribo-tv__lista .tribo-tv__video {
		display: block;
	}

	.tribo-tv__lista .tribo-tv__titulo { margin-top: .55rem; }
}

#tribo-home .tribo-home__secao--tv { background: var(--branco); }

/* ==========================================================================
   AGENDA  --  04/09/2026
   Os proximos eventos, agrupados por mes. A data fica numa coluna propria e
   fixa: numa lista, o olho procura o numero antes do titulo.
   ========================================================================== */

.tribo-agenda { max-width: 47rem; margin-inline: auto; }

.tribo-agenda__mes {
	margin: 2.25rem 0 1rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--linha);
	color: var(--titulo);
	font-size: var(--t-lg);
}

.tribo-agenda__mes:first-child { margin-top: 0; }

.tribo-agenda__lista {
	display: grid;
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tribo-agenda__item {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) auto;
	gap: 1.25rem;
	align-items: center;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--linha);
	border-radius: .7rem;
	background: var(--branco);
}

.tribo-agenda__data {
	display: grid;
	justify-items: center;
	padding: .5rem .25rem;
	border-radius: .5rem;
	background: var(--leite);
	text-align: center;
}

.tribo-agenda__dia {
	color: var(--azul-escuro);
	font-size: 1.65rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.tribo-agenda__semana {
	margin-top: .1rem;
	color: var(--silencio);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tribo-agenda__hora {
	margin-top: .2rem;
	color: var(--texto);
	font-size: var(--t-xs);
	font-variant-numeric: tabular-nums;
}

.tribo-agenda__natureza {
	display: flex;
	gap: .4rem;
	align-items: center;
	margin: 0 0 .2rem;
	color: var(--silencio);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.tribo-agenda__natureza .tribo-icone { width: 1rem; height: 1rem; }

.tribo-agenda__corpo h3 {
	margin: 0 0 .25rem;
	font-size: var(--t-md);
}

.tribo-agenda__corpo h3 a { color: var(--titulo); text-decoration: none; }
.tribo-agenda__corpo h3 a:hover { color: var(--azul); }

.tribo-agenda__resumo {
	margin: 0 0 .3rem;
	color: var(--texto);
	font-size: var(--t-sm);
}

.tribo-agenda__detalhes {
	margin: 0;
	color: var(--silencio);
	font-size: var(--t-xs);
}

.tribo-agenda__acao { justify-self: end; }

.tribo-agenda__saiba {
	color: var(--azul);
	font-size: var(--t-sm);
	font-weight: 600;
	white-space: nowrap;
}

/* --- agenda vazia -------------------------------------------------------- */

.tribo-agenda__vazio {
	max-width: 40rem;
	margin-inline: auto;
	padding: 2rem;
	border: 1px solid var(--linha);
	border-radius: .8rem;
	background: var(--leite);
	text-align: center;
}

.tribo-agenda__vazio p { color: var(--texto); }
.tribo-agenda__vazio p:first-child { color: var(--titulo); font-size: var(--t-md); }

.tribo-agenda__vazio-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: center;
	margin-bottom: 0 !important;
}

/* --- a pagina de um evento ----------------------------------------------- */

.tribo-evento__ficha {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
	gap: 1px;
	margin: 0 0 1.5rem;
	overflow: hidden;
	border: 1px solid var(--linha);
	border-radius: .6rem;
	background: var(--linha);
}

.tribo-evento__ficha > div { padding: .85rem 1rem; background: var(--leite); }

.tribo-evento__ficha dt {
	margin-bottom: .2rem;
	color: var(--silencio);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tribo-evento__ficha dd {
	margin: 0;
	color: var(--titulo);
	font-size: var(--t-sm);
}

.tribo-evento__acao { margin-bottom: 1.75rem; }

.tribo-evento__volta {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--linha);
}

.tribo-evento__volta a { color: var(--azul); font-weight: 600; }

@media (max-width: 40rem) {
	.tribo-agenda__item {
		grid-template-columns: 3.5rem minmax(0, 1fr);
		gap: .9rem;
	}

	.tribo-agenda__acao {
		grid-column: 1 / -1;
		justify-self: stretch;
	}

	.tribo-agenda__acao .tribo-btn { width: 100%; }
	.tribo-agenda__dia { font-size: 1.35rem; }
}

/* --- o palco -------------------------------------------------------------
   Um player so, e qualquer cartao troca o que toca nele. O Short abre em pe,
   dentro da mesma altura: se o palco crescesse, a coluna ao lado saltaria a
   cada clique. Em pe e a 410px de altura, o Short fica quase cinco vezes
   maior do que era no cartao de 152px onde ele abria antes. */

.tribo-tv__palco {
	position: relative;
	overflow: hidden;
	border-radius: .75rem;
}

.tribo-tv__palco--tocando {
	aspect-ratio: 16 / 9;
	background: #071F40;
}

.tribo-tv__palco--tocando .tribo-tv__quadro {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Short: o quadro passa a 9:16 e se centraliza, com o fundo escuro ocupando
   o que sobra dos lados. */
.tribo-tv__palco--vertical {
	display: grid;
	place-items: center;
}

/* O quadro se posiciona sobre o palco em vez de ser item de grid: assim a
   altura de 100% resolve contra o palco (que tem position relative e altura
   de 16:9), e a proporcao 9:16 deriva a largura a partir dela.
   Como item de grid, o 100% nao resolvia, o aspect-ratio derivava a altura da
   largura, e o Short abria com 1298px -- mais alto que a tela. */
.tribo-tv__palco--vertical .tribo-tv__quadro {
	position: absolute;
	inset: 0;
	margin: auto;
	width: auto;
	height: 100%;
	aspect-ratio: 9 / 16;
	border-radius: .5rem;
}

.tribo-tv__legenda {
	margin-top: .55rem;
	font-size: var(--t-md);
	-webkit-line-clamp: 2;
}

/* Sem tocar nada, o palco e o cartao de destaque e nao precisa de altura
   propria -- ela vem da capa. */
.tribo-tv__palco .tribo-tv__video--destaque { margin: 0; }

/* Quatro cartoes na coluna, no lugar de tres: sobravam 161px ao lado do
   destaque, e um cartao ocupa 100 com o vao. */
@media (min-width: 62.0625rem) {
	.tribo-tv__lista { align-content: space-between; }
}

/* ==========================================================================
   FORMULARIO DO HOROSCOPO  --  04/09/2026
   A aba do horoscopo deixou de explicar por que o horoscopo comeca pelo mapa
   e passou a perguntar as duas coisas de que precisa. Quem clica em
   "Horoscopo" quer o horoscopo.
   ========================================================================== */

.tribo-horo-form label {
	display: block;
	margin: .9rem 0 .3rem;
	color: var(--titulo);
	font-size: var(--t-sm);
	font-weight: 700;
}

.tribo-horo-form input {
	width: 100%;
	min-height: 3rem;
	padding: .6rem .85rem;
	border: 1px solid var(--tribo-campo-borda, #828EA0);
	border-radius: .45rem;
	background: var(--branco);
	color: var(--titulo);
	font: inherit;
	font-size: var(--t-base);
}

.tribo-horo-form input:focus-visible {
	border-color: var(--azul);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px rgba(0, 74, 173, .16);
}

.tribo-horo-form .tribo-btn {
	width: 100%;
	margin-top: 1.1rem;
}

.tribo-cartao__erro {
	margin: 0 0 .5rem;
	padding: .6rem .8rem;
	border-radius: .4rem;
	background: #FBF3F2;
	color: var(--chakra-raiz-texto);
	font-size: var(--t-sm);
	font-weight: 600;
}

/* O cumprimento de quem chegou pelo formulario: acima do h1, menor que ele. */
.tribo-horo__saudacao {
	margin: 0 0 .3rem;
	color: var(--azul);
	font-size: var(--t-md);
	font-weight: 600;
}

/* =============================================================
   AS PAGINAS DAS FRENTES
   Oraculos com atendimento, palestras, retiros e o selo de
   editora. Sao paginas de texto -- nenhuma tem carrinho, e
   nenhuma tem preco publicado --, entao a hierarquia e toda
   tipografica: um titulo, blocos com respiro entre eles, e uma
   unica porta de saida no fim.
   Nao viram cartoes. Cartao promete escolha entre iguais, e
   aqui cada bloco responde uma pergunta diferente da anterior.
   ============================================================= */

.tribo-frente-pagina {
	max-width: 68ch;

	/* Centrada, e nao encostada a esquerda. A abertura do site e
	   centralizada em toda pagina; uma coluna de texto a esquerda
	   com o titulo centralizado dentro dela le como erro. */
	margin-inline: auto;
}

/* O icone e SVG, e svg no tema e display:block -- text-align da
   abertura nao o alcanca. Centraliza pela caixa. */
.tribo-frente-pagina__icone {
	display: flex;
	justify-content: center;
	margin-bottom: var(--e-3);
	color: var(--azul);
}

.tribo-frente-pagina__icone svg {
	width: 40px;
	height: 40px;
}

.tribo-frente-pagina__bloco {
	margin-top: var(--e-7);
}

.tribo-frente-pagina__bloco h2 {
	margin-bottom: var(--e-3);
	font-size: var(--t-lg);
}

.tribo-frente-pagina__bloco p {
	margin-bottom: var(--e-3);
	color: var(--texto);
}

.tribo-frente-pagina__bloco p:last-child { margin-bottom: 0; }

/* ---- os formatos, em linhas rotuladas ---- */

.tribo-frente-pagina__lista {
	display: grid;
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--linha);
	border-radius: var(--r);
	background: var(--linha);
}

.tribo-frente-pagina__item {
	display: grid;
	gap: .2rem;
	padding: var(--e-4) var(--e-5);
	background: var(--leite);
}

.tribo-frente-pagina__item strong { color: var(--titulo); }
.tribo-frente-pagina__item span { color: var(--texto); font-size: var(--t-sm); }

/* ---- atalhos para o que ja existe ---- */

.tribo-frente-pagina__atalhos {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: var(--e-4);
	margin-bottom: 0;
}

/* ---- as datas vindas da agenda ---- */

.tribo-frente-pagina__datas {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tribo-frente-pagina__data {
	display: grid;
	gap: .15rem;
	padding: var(--e-4) 0;
	border-top: 1px solid var(--linha);
}

.tribo-frente-pagina__data:last-child { border-bottom: 1px solid var(--linha); }

.tribo-frente-pagina__data time {
	color: var(--azul);
	font-size: var(--t-sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.tribo-frente-pagina__data a {
	color: var(--titulo);
	font-weight: 600;
	text-decoration: none;
}

.tribo-frente-pagina__data a:hover { color: var(--azul); text-decoration: underline; }
.tribo-frente-pagina__data small { color: var(--texto); font-size: var(--t-sm); }

/* ---- o limite dito por extenso ---- */

.tribo-frente-pagina__limite {
	margin-top: var(--e-5);
	padding-top: var(--e-4);
	border-top: 1px solid var(--linha);
	color: var(--texto);
	font-size: var(--t-sm);
}

/* ---- a saida ---- */

.tribo-frente-pagina__fecho {
	margin-top: var(--e-7);
	padding: var(--e-6);
	border-radius: var(--r-lg);
	background: var(--leite);
}

.tribo-frente-pagina__fecho p { color: var(--texto); }
.tribo-frente-pagina__fecho p:last-child { margin-bottom: 0; }

@media (max-width: 40rem) {
	.tribo-frente-pagina__fecho { padding: var(--e-5); }
	.tribo-frente-pagina__item { padding: var(--e-4); }
}

/* =============================================================
   O MENU DO CELULAR  --  05/09/2026

   A barra tinha 2375px num visor de 375: os itens alem da borda
   ficavam invisiveis, e o overflow-x: clip do body impedia ate a
   rolagem que denunciaria o problema. Vinte e cinco links nao
   cabem numa linha, e nenhuma quantidade de ajuste faz caber.

   O painel e a MESMA <nav>, tirada do fluxo e posta sobre a
   pagina. Nao ha segundo menu no HTML -- o topo anterior deste
   projeto carregava as duas versoes ao mesmo tempo, e era metade
   do peso dele.

   Tudo aqui esta preso a .tribo-topo--painel, classe que so o
   script adiciona. Sem JavaScript nada disto vale, e a barra
   continua sendo a barra que rola: degradacao que nao perde a
   funcao.
   ============================================================= */

.tribo-topo__abrir {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--r);
	background: none;
	color: var(--titulo);
	cursor: pointer;
}

.tribo-topo__abrir:hover { background: var(--leite); }

.tribo-topo__abrir .tribo-topo__icone { width: 24px; height: 24px; }

/* Um icone por vez: o X so aparece com o painel aberto. */
.tribo-topo__abrir .tribo-topo__icone--fechar { display: none; }
.tribo-topo--aberto .tribo-topo__abrir .tribo-topo__icone--menu { display: none; }
.tribo-topo--aberto .tribo-topo__abrir .tribo-topo__icone--fechar { display: block; }

/* Trava a pagina de fundo enquanto o painel estiver aberto. */
html.tribo-sem-rolagem,
html.tribo-sem-rolagem body { overflow: hidden; }

@media (max-width: 75rem) {

	.tribo-topo--painel .tribo-topo__abrir { display: flex; }

	/* Com a barra fora do fluxo, a linha do topo volta a ser simples:
	   botao, marca, acoes. E some o problema de trilha esticada, que
	   so existia porque a navegacao atravessava as colunas.

	   O `html` na frente nao e enfeite: a regra de <=40rem mais abaixo
	   e `html .tribo-topo`, e sem ele esta aqui perdia por um ponto de
	   especificidade. As acoes iam parar numa segunda linha, a esquerda
	   do logotipo. Medido em 05/09/2026. */
	html .tribo-topo--painel {
		grid-template-columns: auto 1fr auto;
		align-items: center;
	}

	.tribo-topo--painel .tribo-topo__marca { justify-self: start; }

	/* ---- o painel ---- */

	.tribo-topo--painel .tribo-topo__nav {
		position: fixed;
		inset: 0;
		z-index: 60;
		display: flex;
		flex-direction: column;
		gap: 0;
		order: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 5.5rem var(--e-5) calc(var(--e-6) + env(safe-area-inset-bottom));
		background: var(--papel);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform .34s cubic-bezier(.22, 1, .36, 1), visibility 0s .34s;
	}

	.tribo-topo--aberto .tribo-topo__nav {
		transform: none;
		visibility: visible;
		transition: transform .34s cubic-bezier(.22, 1, .36, 1), visibility 0s;
	}

	/* A barra inteira fica por cima do painel -- botao, marca e acoes.
	   Com o painel cobrindo tudo, quem abrisse o menu perdia de vista
	   onde estava: sobrava um X solto numa tela quase vazia. Mantendo a
	   marca e a busca visiveis, o painel parece uma gaveta que abriu
	   sobre a pagina, e nao outra pagina. */
	.tribo-topo--painel .tribo-topo__abrir,
	.tribo-topo--aberto .tribo-topo__marca,
	.tribo-topo--aberto .tribo-topo__acoes {
		position: relative;
		z-index: 61;
	}

	/* A chamada do topo sai enquanto o painel estiver aberto: ela ja
	   esta la dentro, maior e com o rotulo inteiro. */
	.tribo-topo--aberto .tribo-topo__cta { display: none; }

	/* ---- a lista, na vertical ---- */

	.tribo-topo--painel .tribo-topo__lista {
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.tribo-topo--painel .tribo-topo__item {
		display: block;
		border-bottom: 1px solid var(--linha);
	}

	.tribo-topo--painel .tribo-topo__lista > li > a,
	.tribo-topo--painel .tribo-topo__grupo {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--e-3);
		width: 100%;
		min-height: 52px;
		padding: var(--e-3) 0;
		border: 0;
		background: none;
		color: var(--titulo);
		font-size: var(--t-md);
		font-weight: 600;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
	}

	.tribo-topo--painel .tribo-topo__grupo .tribo-topo__icone {
		flex: none;
		width: 20px;
		height: 20px;
		color: var(--azul);
		transition: transform .22s ease;
	}

	.tribo-topo--painel .tribo-topo__grupo[aria-expanded="true"] .tribo-topo__icone {
		transform: rotate(180deg);
	}

	/* ---- a sanfona ---- */

	/* Sanfona por grid-template-rows, e nao por max-height.
	   max-height obriga a chutar um teto -- estava em 30rem -- e um
	   grupo com mais itens que o teto sairia cortado; alem disso ela
	   anima propriedade de layout, que forca recalculo a cada quadro.
	   0fr -> 1fr anima ate a altura real, seja ela qual for. */
	.tribo-topo--painel .tribo-topo__sub {
		display: grid;
		grid-template-rows: 0fr;
		position: static;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: grid-template-rows .3s cubic-bezier(.22, 1, .36, 1);
	}

	/* O filho unico e quem recorta enquanto a linha vale 0fr. */
	.tribo-topo--painel .tribo-topo__sub > .tribo-topo__sub-lista {
		min-height: 0;
		overflow: hidden;
	}

	.tribo-topo--painel .tribo-topo__grupo[aria-expanded="true"] + .tribo-topo__sub {
		grid-template-rows: 1fr;
	}

	.tribo-topo--painel .tribo-topo__sub a {
		display: flex;
		align-items: center;
		min-height: 46px;
		padding: var(--e-2) 0 var(--e-2) var(--e-4);
		border-left: 1px solid var(--linha);
		color: var(--texto);
		font-size: var(--t-sm);
		font-weight: 500;
		text-decoration: none;
	}

	.tribo-topo--painel .tribo-topo__sub li:last-child a { margin-bottom: var(--e-3); }

	.tribo-topo--painel .tribo-topo__sub a:hover,
	.tribo-topo--painel .tribo-topo__sub a:focus-visible { color: var(--azul); }

	.tribo-topo--painel .tribo-topo__atual { color: var(--azul); }

	/* ---- o pe do painel ---- */

	.tribo-topo__painel-pe {
		display: grid;
		gap: var(--e-3);
		margin-top: var(--e-6);
		padding-top: var(--e-5);
	}

	.tribo-topo__painel-cta { justify-content: center; text-align: center; }

	.tribo-topo__painel-conta {
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--texto);
		font-size: var(--t-sm);
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

/* No desktop o pe do painel nao existe. */
@media (min-width: 75.0625rem) {
	.tribo-topo__painel-pe { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tribo-topo__nav,
	.tribo-topo__sub,
	.tribo-topo__grupo .tribo-topo__icone { transition-duration: .01ms !important; }
	.tribo-topo--painel .tribo-topo__sub { transition: none; }
}

/* =============================================================
   A HOME NO CELULAR  --  05/09/2026

   Medida num 390x845: 13.284px de altura, ou 15,7 telas. O
   rodape sozinho tinha 1.589px e a secao do blog 1.816. Ninguem
   rola quinze telas -- a TV e o rodape simplesmente nao existiam
   para quem entrava pelo telefone.

   A causa nao era conteudo demais. Era que TODA grade caia para
   uma coluna abaixo de 40rem: quatro caminhos empilhados em
   1.399px, dez ferramentas em 1.211px, tres posts em 1.442px.
   Coluna unica e o padrao seguro do responsivo, e aqui ele
   estava cobrando dez telas por cautela.

   Nada foi removido da pagina. O que muda e a forma: cartao com
   capa vira cartao com miniatura ao lado, lista vertical vira
   grade de dois, e a fileira de videos rola na horizontal --
   que e como se ve video em qualquer telefone.

   O seletor repete #tribo-home porque as regras originais tem
   esse ID: sem ele, nada aqui vence.
   ============================================================= */

@media (max-width: 40rem) {

	/* Nove secoes a 3,5rem em cima e embaixo somavam 1.008px de
	   respiro -- mais de uma tela inteira so de vao. */
	#tribo-home .tribo-home__secao { padding: 2.5rem 0; }

	#tribo-home .tribo-home__heroi { padding-top: 1.5rem; }

	/* ---- os quatro atalhos: dois por linha ---- */

	#tribo-home .tribo-home__atalhos { grid-template-columns: repeat(2, 1fr); }

	#tribo-home .tribo-home__atalho {
		border-right: 1px solid var(--linha);
		border-bottom: 1px solid var(--linha);
	}

	#tribo-home .tribo-home__atalho:nth-child(2n) { border-right: 0; }
	#tribo-home .tribo-home__atalho:nth-last-child(-n+2) { border-bottom: 0; }

	/* ---- os caminhos: capa ao lado, nao acima ----
	   Quatro cartoes de 350px de altura viravam 1.399px. Com a
	   capa a esquerda cada um cabe em 140, e os quatro somam o
	   que um sozinho ocupava. */

	/* A capa e uma miniatura, e nao uma faixa. Esticada para a altura
	   do cartao ela virava 112x180 -- retrato -- e as fotos sao
	   paisagens de 560x320: montanha e horizonte saiam cortados nas
	   laterais, sobrando um recorte que nao dizia nada. Em 4:3 e
	   centralizada, a foto continua sendo a foto. */
	#tribo-home .tribo-home__caminho {
		display: grid;
		/* 7,5rem e nao 8,25: com a miniatura maior sobravam 177px
		   para o texto, e "Autoconhecimento" -- dezesseis letras numa
		   serifa de 22px -- nao cabia e saia cortado pelo
		   `overflow: hidden` do cartao. */
		grid-template-columns: 7.5rem 1fr;
		gap: .8rem;

		/* Alinhado pelo topo, e nao centrado. Centrada, a miniatura
		   flutuava no meio de uma coluna mais alta que ela, e o topo
		   da foto caia abaixo do titulo -- os dois comecavam em
		   alturas diferentes, o que le como desalinho. */
		align-items: start;
		padding: .85rem;
		overflow: hidden;
	}

	#tribo-home .tribo-home__caminho-capa {
		height: auto;
		margin: 0;
		border-radius: var(--r);
		overflow: hidden;
	}

	#tribo-home .tribo-home__caminho-capa img {
		display: block;
		width: 100%;
		height: auto;
		min-height: 0;
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}

	#tribo-home .tribo-home__caminho-corpo { padding: 0; }

	/* Rede de seguranca: nenhuma palavra longa pode ser cortada pela
	   borda. Quebrar e feio; sumir com a ultima letra e defeito. */
	#tribo-home .tribo-home__caminho h3 {
		overflow-wrap: break-word;
		hyphens: auto;
		font-size: var(--t-md);
		line-height: 1.2;
	}
	#tribo-home .tribo-home__caminho-corpo p { margin-bottom: .5rem; }

	/* ---- as dez ferramentas: duas por linha ----
	   Icone e nome. A descricao de uma linha nao cabe em 168px
	   sem virar quatro linhas, e o nome de cada uma ja diz o que
	   e -- o texto inteiro continua na pagina de destino. */

	#tribo-home .tribo-home__ferramentas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .5rem;
	}

	#tribo-home .tribo-home__ferramenta a {
		flex-direction: column;
		align-items: flex-start;
		gap: .5rem;
		padding: .9rem;
		min-height: 100%;
	}

	#tribo-home .tribo-home__ferramenta-corpo small { display: none; }

	#tribo-home .tribo-home__ferramenta-corpo strong {
		font-size: var(--t-sm);
		line-height: 1.25;
	}

	/* ---- os doze signos: quatro por linha ---- */

	/* Tres por linha. Com quatro, cada celula ficava com 78px e o
	   glifo de 32px quase encostava nas bordas. */
	#tribo-home .tribo-home__signos { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* ---- o blog: miniatura ao lado ----
	   Tres posts com capa de 185px somavam 1.442. A capa quadrada
	   de 6,5rem conta a mesma coisa em um quinto do espaco. */

	/* O `html` na frente e obrigatorio aqui: as regras originais do
	   blog sao `html .tribo-blog-home .tribo-post__capa`, e sem ele
	   estas perdem por um seletor de elemento. A capa continuava com
	   185px de altura numa coluna de 104. */
	html .tribo-blog-home .tribo-grade { gap: .75rem; }

	/* Cartao vertical, e nao miniatura ao lado.

	   Com a capa quadrada de 104px a esquerda e a coluna de texto
	   com o dobro da altura, sobrava uma faixa branca morta embaixo
	   da foto -- o cartao ficava com peso so no canto de cima. E a
	   coluna estreita obrigava o resumo a cortar no meio de uma
	   palavra: "esvazia o sentido. A...".

	   Em cima e na largura toda, a foto fica na proporcao dela (e
	   sao paisagens), o resumo cabe inteiro nas tres linhas e o
	   cartao passa a ter uma leitura so, de cima para baixo. Custa
	   uns 100px por cartao; vale. */
	html .tribo-blog-home .tribo-post {
		display: block;
	}

	html .tribo-blog-home .tribo-post__capa {
		display: block;
		width: 100%;
		height: auto;
		min-height: 0;
		aspect-ratio: 2 / 1;
		margin: 0 0 .85rem;
		border-radius: var(--r);
		overflow: hidden;
	}

	html .tribo-blog-home .tribo-post__capa img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* O resumo nao some: encolhe para duas linhas. Esconder tirava
	   128px por cartao, mas tirava tambem a unica frase que diz do
	   que o texto trata. */
	/* Tres linhas na largura cheia cabem as 128 letras do resumo do
	   WordPress inteiras -- a reticencia que aparece passa a ser a
	   dele, e nao um segundo corte por cima. */
	html .tribo-blog-home .tribo-post__resumo {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-bottom: .6rem;
	}

	html .tribo-blog-home .tribo-post__avatar { display: none; }
	/* Zerar o padding aqui foi erro meu, do tempo do cartao com a
	   miniatura ao lado -- naquele formato o corpo era uma coluna
	   da grade e o respiro vinha do cartao. Voltando ao cartao
	   vertical, o texto ficou encostado nas bordas. */
	html .tribo-blog-home .tribo-post__corpo {
		padding: var(--e-5) var(--e-5) var(--e-4);
	}

	/* E o ritmo interno: 8px entre tudo nao e ritmo, e uma pilha.
	   Mais ar depois da foto, o titulo colado na categoria que o
	   qualifica, e uma folga maior antes da assinatura. */
	html .tribo-blog-home .tribo-post__cat { margin-bottom: .3rem; }
	html .tribo-blog-home .tribo-post__titulo { margin-bottom: .55rem; }
	html .tribo-blog-home .tribo-post__resumo { margin-bottom: .9rem; }
	html .tribo-blog-home .tribo-post__capa { margin-bottom: 0; }
	html .tribo-blog-home .tribo-post__titulo { font-size: var(--t-md); }
	html .tribo-blog-home .tribo-post__autor { margin-top: 0; }

	/* ---- o resto do respiro ---- */

	/* Sem corte de linhas. O clamp de tres terminava a frase em
	   "retrato profundo de quem..." -- reticencia no meio de uma ideia
	   le como defeito, nao como resumo. */

	#tribo-home .tribo-home__heroi-grade { gap: 1.25rem; }
	#tribo-home .tribo-home__pontos { gap: .5rem; }

	/* Cinco posicoes do ceu, uma embaixo da outra, custavam 248px
	   para dizer cinco coisas curtas. */
	.tribo-ceu__lista {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .5rem 1rem;
	}

	/* A margem negativa existe para a caixa cavalgar o heroi no
	   desktop. No celular ela engole os 40px de respiro da secao
	   seguinte, e o titulo "Encontre o que faz sentido" comecava
	   9px ACIMA do fim da caixa -- sobreposto, nao colado. */
	#tribo-home .tribo-home__atalhos-caixa { margin-bottom: 0; }

	/* `padding: 1.25rem 0` era meu, da passada de densidade, e
	   tirou o respiro lateral junto: o texto encostava na borda do
	   cartao. Vertical eu queria mesmo apertar; horizontal, nao. */
	#tribo-home .tribo-home__pilar { padding: 1.25rem 1.15rem; }

	/* ---- a TV: fileira que rola, como em qualquer telefone ---- */

	.tribo-tv__lista {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 62%;
		gap: .75rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		padding-bottom: .35rem;
		scrollbar-width: none;
	}

	.tribo-tv__lista::-webkit-scrollbar { display: none; }
	.tribo-tv__lista .tribo-tv__video { scroll-snap-align: start; }

	/* ---- o rodape ----
	   As quatro colunas de links viram sanfona. O <details> nasce
	   aberto no HTML: sem JavaScript o rodape fica como sempre
	   foi, so comprido. */

	.tribo-rodape__coluna > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		min-height: 48px;
		cursor: pointer;
		list-style: none;
	}

	.tribo-rodape__coluna > summary::-webkit-details-marker { display: none; }

	.tribo-rodape__coluna > summary::after {
		content: "";
		flex: none;
		width: 9px;
		height: 9px;
		border-right: 1.5px solid var(--azul);
		border-bottom: 1.5px solid var(--azul);
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform .2s ease;
	}

	.tribo-rodape__coluna[open] > summary::after {
		transform: rotate(225deg) translate(-2px, -2px);
	}

	/* `html` na frente: a regra de <=40rem la em cima e
	   `html .tribo-rodape__colunas` com auto-fit de 9rem, e sem isto
	   as sanfonas ficavam em duas colunas -- rotulo e seta quase
	   encostando. Sanfona fechada quer a largura toda. */
	html .tribo-rodape__colunas { grid-template-columns: 1fr; gap: 0; }
	html .tribo-rodape__topo { padding-block: var(--e-6) var(--e-5); }

	.tribo-rodape__coluna {
		border-bottom: 1px solid var(--linha);
		padding-bottom: .25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tribo-rodape__coluna > summary::after { transition: none; }
}

/* No telefone o selo circular sai do canto e vira etiqueta.
   Flutuando, ele reservava 60px dos 302 do cartao, e o titulo
   "Veja o ceu do dia em que voce nasceu" caia em tres linhas
   numa coluna de 242px -- espremido ao lado de um circulo.
   Em linha, o titulo usa a largura toda e o selo continua sendo
   a primeira coisa que se le. Medido em 05/09/2026. */
@media (max-width: 40rem) {
	html .tribo-cartao__selo {
		position: static;
		display: inline-flex;
		align-items: center;
		width: auto;
		height: auto;
		margin-bottom: 10px;
		padding: 5px 11px;
		border: 0;
		border-radius: 999px;
		box-shadow: none;
		font-size: 11px;
		letter-spacing: .06em;
	}

	html .tribo-cartao__titulo {
		max-width: none;
		padding-right: 0;
	}
}

/* =============================================================
   A FOTOGRAFIA DO HEROI NO CELULAR  --  05/09/2026

   A foto existia e nao aparecia. O veu do celular era um
   gradiente horizontal de 97% a 88% de branco: sobre 390px de
   largura isso e uma parede clara, e a imagem ficava atras dela
   sem nunca ser vista. Numa tela estreita, gradiente horizontal
   nao tem distancia para revelar nada.

   Agora o veu e vertical e mais leve, e quem garante a leitura
   e o desfoque -- nao a opacidade. Desfocar o fundo em vez de
   clarea-lo deixa a luz, a cor e a silhueta da fotografia
   visiveis, e ainda assim tira o contraste local que competia
   com as letras.

   backdrop-filter desfoca o que esta ATRAS do veu, que aqui e
   so a imagem: o texto vem depois no empilhamento e nao entra
   no filtro.
   ============================================================= */

@media (max-width: 48rem) {

/* A fotografia sai de TRAS do texto e vira faixa ACIMA dele.

	   Desfocar e clarear reduz o contraste local, mas nao resolve:
	   a silhueta da figura caia justamente sob o h1 e sob o lead, e
	   texto escuro sobre um vulto de meio-tom e onde a leitura cede
	   -- "bem-estar" e "mais" ficavam quase ilegiveis.

	   Texto sobre foto e sempre negociacao. Foto acima do texto nao
	   e: a fotografia aparece inteira, na largura e na proporcao
	   dela, e o texto fica sobre papel limpo. Custa a altura da
	   faixa, e e o unico jeito de a leitura nao depender de onde a
	   figura calhou de estar no quadro. */
	#tribo-home .tribo-home__heroi {
		background-position: center top;
		background-size: 100% auto;
		background-repeat: no-repeat;

		/* A faixa e a largura da tela em 16:9, entao a altura dela
		   muda com o aparelho: 219px num 390, 180px num 320. Com
		   recuo fixo o respiro abaixo da foto ia de 28 para 68px.
		   A conta amarra os dois. */
		padding-top: calc(100vw / 1.78 + 1.75rem);
	}

	/* As opacidades sao medidas, nao estimadas. Contra o pixel MAIS
	   ESCURO da fotografia, um veu de 50% da 6,4:1 com a cor do
	   texto -- o minimo exigido e 4,5:1, e o desfoque ainda levanta
	   esse piso porque mistura o escuro com a vizinhanca clara.
	   Estava em 88%: opacidade suficiente para tres vezes o que a
	   leitura pedia, e para nao deixar a foto aparecer. */
/* O pe da foto dissolve, em vez de terminar numa linha.

	   Cortada reta, a fotografia parecia colada por cima da pagina.
	   O que costura as duas coisas e desfoque PROGRESSIVO: nitida
	   em cima, onde esta o assunto, e cada vez mais macia descendo,
	   ate virar papel. E o mesmo principio da profundidade de campo
	   -- o olho aceita porque e assim que ele ve.

	   Sao tres camadas sobre a mesma faixa: dois desfoques com
	   mascara em alturas diferentes, e por ultimo o papel. A
	   mascara e que faz a transicao ser gradual, e nao um degrau. */
	#tribo-home .tribo-home__veu {
		inset: 0 0 auto 0;
		height: calc(100vw / 1.78 + 2.5rem);
		pointer-events: none;
		background: linear-gradient(
			180deg,
			rgba(252, 250, 247, 0) 52%,
			rgba(252, 250, 247, .55) 78%,
			rgba(252, 250, 247, .92) 92%,
			rgb(252, 250, 247) 100%
		);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	#tribo-home .tribo-home__veu::before,
	#tribo-home .tribo-home__veu::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
	}

	/* Primeira camada: desfoque leve, comecando na metade. */
	#tribo-home .tribo-home__veu::before {
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
		-webkit-mask-image: linear-gradient(180deg, transparent 42%, #000 74%);
		mask-image: linear-gradient(180deg, transparent 42%, #000 74%);
	}

	/* Segunda: mais forte, so no terco de baixo. */
	#tribo-home .tribo-home__veu::after {
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		-webkit-mask-image: linear-gradient(180deg, transparent 62%, #000 90%);
		mask-image: linear-gradient(180deg, transparent 62%, #000 90%);
	}
}


/* =============================================================
   CORRECOES DA HOME NO CELULAR  --  05/09/2026, segunda passada

   Quatro defeitos vistos na tela, nao deduzidos: a primeira
   passada foi feita as cegas porque a pre-visualizacao tinha
   parado de pintar, e foi assim que eles passaram.
   ============================================================= */

@media (max-width: 40rem) {

	/* 1. Os quatro atalhos.
	   Em duas colunas, o cartao tem 175px; com icone de 42 a
	   esquerda, sobravam 88px para o texto -- e "Descubra sua
	   essencia e seus potenciais." caia em quatro linhas de duas
	   palavras. Com o icone em cima, o texto recebe 143px e as
	   frases voltam a ter forma. As alturas tambem emparelham:
	   estavam em 140/140/132/132. */
	#tribo-home .tribo-home__atalho {
		flex-direction: column;
		align-items: flex-start;
		gap: .55rem;
		min-height: 0;
		padding: .95rem 1rem;
	}

	#tribo-home .tribo-home__atalho small,
	#tribo-home .tribo-home__atalho span:not([class]) { text-wrap: pretty; }

	/* 2. As posicoes do ceu.
	   Duas colunas de 143px nao seguram "Mercurio -- Virgem": a
	   palavra caia para a linha de baixo e aquela celula ficava
	   com 80px contra 50 das outras, quebrando o alinhamento da
	   grade inteira. Uma coluna nao tem esse problema, e custa
	   124px numa secao que ja e a mais curta da pagina. */
	.tribo-ceu__lista {
		grid-template-columns: 1fr;
		gap: .45rem;
	}

	/* 3. O resumo dos textos.
	   O resumo do WordPress ja chega cortado, com reticencia. O
	   clamp de duas linhas cortava de novo, e o cartao terminava
	   em "Cuidar so do..." -- no meio de uma frase. Com tres
	   linhas o corte cai depois de "esvazia o sentido.", e a
	   reticencia visivel passa a ser a do proprio resumo. */
	html .tribo-blog-home .tribo-post__resumo { -webkit-line-clamp: 3; }

	/* 4. O vao antes do rodape.
	   96px de margem do Elementor mais 56px de respiro interno
	   davam 162px de branco entre o botao "Fazer meu mapa astral"
	   e o logotipo do rodape -- quase um quinto de tela sem nada.
	   No desktop os 96px fazem sentido; num telefone, nao. */
	html body > footer.elementor { margin-top: 2rem; }

	.tribo-rodape__topo { padding-block: var(--e-6) var(--e-5); }
}

/* =============================================================
   O TOPO EM TELA ESTREITA  --  05/09/2026

   Auditoria a 360px: a pagina rolava 19px de lado, em TODAS as
   paginas. A conta: a barra tem 320px de largura (o contentor do
   Elementor tira 20 de cada lado) e 48 de respiro interno, o que
   deixa 272 uteis. As trilhas pediam 44 do botao + 24 de vao +
   153 do logotipo + 24 + 90 dos icones = 335. Sessenta e tres a
   mais, e os icones da busca e da conta terminavam em 379.

   A trilha do meio era `1fr`, que e `minmax(auto, 1fr)`: o piso
   `auto` vale o min-content, e como o logotipo tinha
   `max-width: none` o min-content era 153 fixos. A trilha nao
   podia encolher. Com `minmax(0, 1fr)` e o logotipo podendo
   diminuir, ela encolhe -- e a razao da arte fica intacta porque
   a altura passa a ser automatica.
   ============================================================= */

@media (max-width: 40rem) {
	html .tribo-topo--painel {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: .75rem;
		padding-inline: 1rem;
	}

	html .tribo-topo__logo {
		width: var(--tribo-logo-largura, 153px);
		max-width: 100%;
		height: auto;
	}

}

/* A marca e um link para a home, e link e alvo de toque. O
   logotipo tem 34px de altura no telefone e 38 no tablet, e os
   dois ficam abaixo dos 44 que um dedo pede. Vale em qualquer
   largura: no desktop a barra ja e mais alta que isso, entao a
   regra nao muda nada la. */
html .tribo-topo__marca {
	display: flex;
	align-items: center;
	min-height: 44px;
}

/* A caixa de "Nao sei a hora exata" tinha 20px. O alvo de toque
   ja era o <label> inteiro, de 166x44 -- entao nunca foi um
   problema de acerto, e sim de enxergar. */
.tribo-form input[type="checkbox"],
.tribo-cartao input[type="checkbox"],
.tribo-fieldset input[type="checkbox"] {
	width: 22px;
	height: 22px;
	accent-color: var(--azul);
}

/* Alvos de toque do topo, em qualquer largura.
   A 1024px -- que e tablet em paisagem, nao so desktop -- a
   chamada, a busca e a conta tinham 40px de altura e os links do
   submenu 30. O minimo de 2.5.8 (24px) passa, mas 44 e o que um
   dedo pede sem erro, e no desktop a diferenca de quatro pixels
   nao muda o desenho da barra. */
/* NAO por overflow aqui. `overflow-x: auto` com `overflow-y: visible`
   nao existe em CSS: o navegador promove o eixo vertical para `auto`
   junto, a fila vira caixa de recorte, e os submenus -- que sao
   `position: absolute` logo abaixo dela -- somem cortados. Aconteceu
   em 06/09/2026.

   O transbordamento que isso tentava conter ja esta resolvido na
   grade: a coluna do meio e `max-content`, entao ela pede a largura
   dos itens em vez de receber a sobra. */

html .tribo-topo__cta,
html .tribo-topo__aluno,
html .tribo-topo__busca > summary,
html .tribo-topo__conta {
	min-height: 44px;
	min-width: 44px;
}

html .tribo-topo__sub a {
	display: flex;
	align-items: center;
	min-height: 44px;
}

/* "Explorar meu mapa ->" e a chamada de cada cartao de caminho, e
   era o unico jeito de entrar nele: a capa e aria-hidden com
   tabindex -1, e o cartao inteiro nao e link. Com 22px de altura
   era o menor alvo de toque da pagina. O texto nao muda -- so
   ganha respiro em cima e embaixo. */
html .tribo-home__seta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* =============================================================
   O PISO DAS GRADES  --  05/09/2026

   Vinte e quatro grades usavam `repeat(auto-fit, minmax(Xrem, 1fr))`.
   Esse piso e absoluto: quando o contentor fica mais estreito que
   ele, a trilha nao encolhe e os cartoes vazam para fora. Foi o
   que aconteceu em /terapias/ a 320px -- grade de 260px com uma
   coluna de 272, e a pagina rolando de lado.

   `min(Xrem, 100%)` mantem o piso onde ha espaco e o deixa ceder
   onde nao ha. Nao muda nada em tela larga; e a diferenca entre
   quebrar e nao quebrar em tela estreita.

   Aplicado por substituicao em todas as vinte e quatro, e nao so
   na que apareceu no teste: a que apareceu foi acidente de qual
   pagina eu abri primeiro.
   ============================================================= */

/* "Saiba mais" e "Avisar quando tiver data" sao os links secundarios
   da agenda -- ficam ao lado de um botao, e tinham 25px de altura.
   Ao lado de um alvo de 44, um de 25 e onde o dedo erra. */
html .tribo-agenda__saiba {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Os links das colunas do rodape tinham 30px de altura no desktop.
   Passam no minimo de 24 da norma, e no celular ja eram 44 -- mas
   sao vinte e quatro links empilhados, onde o dedo e o cursor
   erram a linha vizinha. Quarenta resolve, e o rodape nem muda de
   altura: o que era margem entre itens virou area de clique. */
html .tribo-rodape__colunas li a {
	display: flex;
	align-items: center;
	min-height: 44px;
}

html .tribo-rodape__colunas li { margin-bottom: 0; }

/* =============================================================
   CARTAO INTEIRO CLICAVEL  --  05/09/2026

   Tres lugares onde o cartao parecia clicavel e nao era: o
   paragrafo do cartao de caminho, o titulo do pilar e o titulo
   do video. A foto levava, o titulo levava, o texto do meio nao
   -- e quem toca num cartao nao mira, toca no cartao.

   A tecnica e o link esticado: um ::after transparente do link
   principal cobrindo a area toda. Cada um destes cartoes tem um
   destino so (os dois links do caminho e do post apontam para o
   mesmo lugar), entao nao ha o que o retangulo atrapalhe.

   O video nao entra aqui: a capa dele ja e `position: relative`
   por causa do botao de play, e o ::after ficaria preso a capa.
   Naquele caso quem resolve e o assets/video.js.
   ============================================================= */

#tribo-home .tribo-home__caminho,
.tribo-blog-home .tribo-post {
	position: relative;
}

#tribo-home .tribo-home__caminho h3 a::after,
.tribo-blog-home .tribo-post__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* O foco continua desenhando no link, e nao no retangulo
   invisivel -- senao o anel de foco sumia. */
#tribo-home .tribo-home__caminho h3 a:focus-visible,
.tribo-blog-home .tribo-post__titulo a:focus-visible {
	outline: 2px solid var(--azul);
	outline-offset: 3px;
	border-radius: 3px;
}

/* =============================================================
   "EM BREVE"  --  05/09/2026

   Nove paginas ficam seguradas ate o cliente querer abrir cada
   uma. O visitante ve o painel; quem edita o site ve a pagina
   inteira, com a faixa no topo.

   O painel nao pede desculpa e nao deixa a pessoa sem saida:
   quem chegou procurando taro continua sendo alguem interessado
   em se olhar, e as duas ferramentas que estao de pe ficam ali.
   ============================================================= */

.tribo-breve__painel {
	max-width: 34rem;
	margin: var(--e-8) auto;
	padding: var(--e-8) var(--e-6);
	text-align: center;
}

.tribo-breve__icone {
	display: flex;
	justify-content: center;
	margin-bottom: var(--e-4);
	color: var(--azul);
}

.tribo-breve__icone svg { width: 40px; height: 40px; }

.tribo-breve__selo {
	display: inline-flex;
	align-items: center;
	margin: 0 0 var(--e-4);
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--acao-tenue);
	color: var(--acao-forte);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tribo-breve__painel h1 {
	margin-bottom: var(--e-4);
	text-wrap: balance;
}

.tribo-breve__texto {
	max-width: 40ch;
	margin-inline: auto;
	margin-bottom: var(--e-6);
	color: var(--texto);
}

.tribo-breve__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	justify-content: center;
	margin-bottom: var(--e-5);
}

.tribo-breve__nota {
	margin: 0;
	color: var(--silencio);
	font-size: var(--t-sm);
}

/* ---- a faixa de quem edita ----
   Amarela de proposito: ela nao e parte do desenho da pagina,
   e um lembrete de bastidor, e tem de parecer isso. */
.tribo-breve__faixa {
	display: block;
	margin: 0 0 var(--e-6);
	padding: .85rem 1.1rem;
	border: 1px solid var(--chakra-plexo);
	border-radius: var(--r);
	background: var(--leite);
	background: color-mix(in srgb, var(--chakra-plexo) 12%, var(--branco));
	color: var(--tinta);
	font-size: var(--t-sm);
}

.tribo-breve__faixa strong { display: block; margin-bottom: .15rem; }

/* ---- o selo nas listas ---- */

.tribo-selo-breve {
	display: inline-block;
	margin-left: .5rem;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--areia);
	color: var(--tinta-suave);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

/* No painel do celular o selo vai para a direita da linha, longe
   do rotulo, que e onde ele nao atrapalha a leitura do nome. */
@media (max-width: 75rem) {
	.tribo-topo--painel .tribo-topo__sub a,
	.tribo-topo--painel .tribo-topo__lista > li > a {
		justify-content: space-between;
	}

	.tribo-topo--painel .tribo-selo-breve { margin-left: auto; }
}

@media (max-width: 40rem) {
	.tribo-breve__painel { padding: var(--e-6) var(--e-4); margin-block: var(--e-6); }
	.tribo-breve__acoes .tribo-btn { width: 100%; justify-content: center; }
}

/* Arquivo de categoria que ainda nao tem texto. Sem isto a pagina
   sai com o titulo e nada embaixo, o que le como defeito e nao
   como "ainda nao escrevemos". */
.tribo-vazio {
	max-width: 34rem;
	margin: var(--e-7) auto;
	padding: var(--e-6);
	border: 1px solid var(--linha);
	border-radius: var(--r-lg);
	background: var(--leite);
	text-align: center;
}

.tribo-vazio p { color: var(--texto); }
.tribo-vazio p:last-child { margin-bottom: 0; }
.tribo-vazio strong { color: var(--titulo); }