@charset "UTF-8";
/**
 * Camada visual da Tribo das Estrelas.
 *
 * O sistema em design.css resolve estrutura: tokens, escala, ritmo,
 * componentes. Ele deixa o site correto. Nao deixa bonito.
 *
 * Este arquivo trata do que faltava: profundidade, ornamento e o uso real
 * das sete cores de chakra, que ate aqui apareciam so como cor de doze
 * glifos. A direcao do cliente era branco, azul da borda do logo e chakras
 * nos destaques -- a terceira parte estava praticamente ausente.
 *
 * Linguagem escolhida: celeste contida. Geometria orbital, linha fina,
 * brilho sutil. Nada de fonte gotica nem roxo-e-estrelas, que e o lugar-comum
 * do assunto e briga com "espiritualidade com pe no chao".
 *
 * ASCII puro nos comentarios, pelo motivo de sempre.
 */

/* ============================================================
   1. O espectro dos chakras
   ------------------------------------------------------------
   Elemento de assinatura da marca. Sete cores na ordem dos chakras,
   da raiz ao coronario, numa faixa fina. Usado como divisor de secao
   e como detalhe no topo de pecas importantes.
   ============================================================ */

:root {
	--espectro: linear-gradient(
		90deg,
		var(--chakra-raiz) 0%,
		var(--chakra-sacral) 17%,
		var(--chakra-plexo) 33%,
		var(--chakra-cardiaco) 50%,
		var(--chakra-laringeo) 67%,
		var(--chakra-frontal) 83%,
		var(--chakra-coronario) 100%
	);
}

.tribo-espectro {
	display: block;
	width: 100%;
	height: 3px;
	border: 0;
	margin: 0;
	background: var(--espectro);
}

/* Versao discreta: para topo de cartao, onde 3px de sete cores gritaria. */
.tribo-espectro--fino {
	height: 2px;
	opacity: .85;
}

/* ============================================================
   2. Fundos com profundidade
   ------------------------------------------------------------
   Branco chapado da pagina inteira e o que faz o site parecer um
   documento em vez de um produto. Estes fundos custam zero byte de
   imagem e dao materia ao espaco.
   ============================================================ */

/* Luz que desce do topo, como um ceu clareando. */
.tribo-fundo-aurora {
	background:
		radial-gradient(120% 70% at 50% 0%, rgba(0, 74, 173, .07) 0%, rgba(0, 74, 173, 0) 60%),
		var(--branco);
}

/* Superficie fria, para alternar com o branco e criar ritmo. */
.tribo-fundo-superficie {
	background:
		radial-gradient(90% 60% at 15% 0%, rgba(119, 60, 154, .05) 0%, rgba(119, 60, 154, 0) 55%),
		radial-gradient(90% 60% at 85% 100%, rgba(0, 173, 229, .05) 0%, rgba(0, 173, 229, 0) 55%),
		var(--superficie);
}

/* Noite: para secoes de contraste. O ponto branco repetido faz estrela
   sem precisar de imagem, e o gradiente por cima evita o efeito de
   papel de parede. */
.tribo-fundo-noite {
	position: relative;
	background:
		radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, .55) 50%, transparent 51%),
		radial-gradient(1px 1px at 70% 15%, rgba(255, 255, 255, .40) 50%, transparent 51%),
		radial-gradient(1px 1px at 45% 70%, rgba(255, 255, 255, .35) 50%, transparent 51%),
		radial-gradient(1.4px 1.4px at 85% 55%, rgba(255, 255, 255, .50) 50%, transparent 51%),
		radial-gradient(1px 1px at 10% 80%, rgba(255, 255, 255, .30) 50%, transparent 51%),
		radial-gradient(130% 90% at 50% -10%, #16345C 0%, #0B1E38 55%, #071528 100%);
	background-size: 340px 340px, 420px 420px, 300px 300px, 520px 520px, 380px 380px, 100% 100%;
	color: #DDE7F5;
}

.tribo-fundo-noite h1,
.tribo-fundo-noite h2,
.tribo-fundo-noite h3,
.tribo-fundo-noite h4 {
	color: var(--branco);
}

/* ============================================================
   3. Ornamento orbital
   ------------------------------------------------------------
   Aneis concentricos em linha fina, como orbita. Puramente decorativo,
   entao sai da arvore de acessibilidade e do fluxo.
   ============================================================ */

.tribo-orbita {
	position: absolute;
	pointer-events: none;
	border-radius: 50%;
	border: 1px solid rgba(0, 74, 173, .12);
}

.tribo-orbita::before,
.tribo-orbita::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(0, 74, 173, .09);
}

.tribo-orbita::before { inset: 14%; }
.tribo-orbita::after  { inset: 30%; }

/* Sobre fundo escuro a linha precisa ser clara para existir. */
.tribo-fundo-noite .tribo-orbita { border-color: rgba(255, 255, 255, .14); }
.tribo-fundo-noite .tribo-orbita::before,
.tribo-fundo-noite .tribo-orbita::after { border-color: rgba(255, 255, 255, .10); }

/* ============================================================
   4. O formulario do mapa
   ------------------------------------------------------------
   E a peca mais importante da home: e nela que o site cumpre o seu
   unico objetivo. Estava com a mesma presenca visual de uma caixa de
   texto qualquer.
   ============================================================ */

.tribo-form {
	position: relative;
	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: 0 18px 50px rgba(9, 24, 46, .18), 0 2px 6px rgba(9, 24, 46, .06);
	overflow: hidden;
}

/* O espectro assina o topo do cartao. */
.tribo-form::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--espectro);
}

.tribo-form__title {
	font-family: var(--fonte-titulo);
	color: var(--titulo);
}

.tribo-form__lead {
	color: var(--silencio);
}

/* A legenda de cada bloco vira rotulo, nao titulo: hierarquia mais clara
   entre "secao do formulario" e "titulo do cartao". */
.tribo-form .tribo-fieldset legend {
	font-family: var(--fonte-texto);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--azul);
}

.tribo-form .tribo-button {
	width: 100%;
	border-radius: var(--r);
	box-shadow: 0 6px 18px rgba(0, 74, 173, .28);
}

.tribo-form .tribo-button:hover {
	box-shadow: 0 8px 22px rgba(0, 74, 173, .36);
}

/* ============================================================
   5. Os doze signos
   ------------------------------------------------------------
   A grade funcionava, mas cada cartao era uma caixa branca de borda
   fina. O glifo e o heroi de cada peca e merece o espaco.
   ============================================================ */

.tribo-signo {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-lg);
	box-shadow: 0 1px 3px rgba(20, 36, 61, .05);
}

/* Halo na cor do elemento, atras do glifo. Da cor ao cartao sem pintar
   o fundo inteiro, o que competiria com a leitura. */
.tribo-signo::before {
	content: "";
	position: absolute;
	top: -34px;
	left: 50%;
	width: 130px;
	height: 130px;
	transform: translateX(-50%);
	border-radius: 50%;
	opacity: .10;
	transition: opacity var(--transicao), transform var(--transicao);
}

.tribo-signo--fogo::before  { background: var(--chakra-raiz); }
.tribo-signo--terra::before { background: var(--chakra-cardiaco); }
.tribo-signo--ar::before    { background: var(--chakra-sacral); }
.tribo-signo--agua::before  { background: var(--chakra-laringeo); }

.tribo-signo:hover::before {
	opacity: .18;
	transform: translateX(-50%) scale(1.08);
}

.tribo-signo-glifo {
	position: relative;
	z-index: 1;
}

.tribo-signo-nome {
	position: relative;
	z-index: 1;
	font-family: var(--fonte-titulo);
}

/* ============================================================
   6. Cartoes em geral
   ============================================================ */

.tribo-card {
	position: relative;
	overflow: hidden;
	box-shadow: var(--sombra);
}

.tribo-card--espectro::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: var(--espectro);
}

/* ============================================================
   7. Titulo de secao
   ------------------------------------------------------------
   Um tracinho curto no azul da marca acima do titulo. Custa uma
   pseudo-classe e da inicio visual a cada bloco.
   ============================================================ */

.tribo-secao-titulo {
	position: relative;
	padding-top: var(--e-5);
}

.tribo-secao-titulo::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 44px;
	height: 3px;
	border-radius: 2px;
	background: var(--azul);
}

.tribo-secao-titulo--centro::before {
	left: 50%;
	transform: translateX(-50%);
}

/* ============================================================
   8. Pagina de endereco inexistente
   ============================================================ */

.tribo-404 {
	max-width: 620px;
	margin-inline: auto;
	padding-block: var(--e-7);
	text-align: center;
}

.tribo-404__codigo {
	margin: 0 0 var(--e-2);
	font-family: var(--fonte-titulo);
	font-size: clamp(4rem, 12vw, 7rem);
	line-height: 1;
	background: var(--espectro);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.tribo-404__texto {
	color: var(--silencio);
	margin-inline: auto;
	max-width: 46ch;
}

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

.tribo-404__rotulo {
	margin: 0 0 var(--e-2);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--silencio);
}

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

/* ============================================================
   9. Contato
   ============================================================ */

.tribo-contato-grade {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: var(--e-7);
	align-items: start;
}

@media (max-width: 860px) {
	.tribo-contato-grade { grid-template-columns: 1fr; gap: var(--e-6); }
}

.tribo-contato-canal {
	display: flex;
	gap: var(--e-4);
	padding-block: var(--e-4);
	border-bottom: 1px solid var(--linha);
}

.tribo-contato-canal:last-child { border-bottom: 0; }

.tribo-contato-canal__marca {
	flex: 0 0 auto;
	width: 8px;
	border-radius: 4px;
	background: var(--espectro);
}

.tribo-contato-canal__nome {
	margin: 0 0 2px;
	font-family: var(--fonte-titulo);
	font-size: var(--t-md);
	color: var(--titulo);
}

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

/* ============================================================
   10. Provas do heroi
   ------------------------------------------------------------
   A coluna de texto terminava no terco de cima e deixava uma
   extensao vazia de ceu ate a dobra, enquanto o cartao ao lado ia
   ate embaixo. Composicao torta.

   Estas tres linhas nao sao enfeite: sao o que diferencia o produto
   de qualquer gerador de mapa da internet. O marcador em cor de
   chakra da o uso da paleta que faltava.
   ============================================================ */

.tribo-provas {
	list-style: none;
	margin: var(--e-6) 0 0;
	padding: 0;
	display: grid;
	gap: var(--e-4);
}

.tribo-prova {
	position: relative;
	padding-left: var(--e-5);
	font-size: var(--t-sm);
	line-height: 1.6;
	color: rgba(226, 236, 250, .78);
}

.tribo-prova strong {
	display: block;
	color: #FFFFFF;
	font-weight: 700;
}

/* Marcador: barra fina na cor do chakra, alinhada a primeira linha. */
.tribo-prova::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: 3px;
	height: 1.15em;
	border-radius: 2px;
}

.tribo-prova--1::before { background: var(--chakra-laringeo); }
.tribo-prova--2::before { background: var(--chakra-sacral); }
.tribo-prova--3::before { background: var(--chakra-cardiaco); }

@media (max-width: 767px) {
	.tribo-provas { margin-top: var(--e-5); gap: var(--e-3); }
}

/* ============================================================
   11. O ceu agora
   ------------------------------------------------------------
   O pico da pagina. Depois do heroi, a home era clara de ponta a
   ponta, alternando branco e superficie numa batida metronomica --
   seis secoes, duas cores, nenhum acento. Era isso que fazia ela ler
   como plana, nao a falta de efeito.

   Esta faixa escura quebra a repeticao e mostra o unico artefato que
   so nos temos: uma roda astrologica calculada de verdade.

   A roda foi desenhada para fundo claro. Em vez de inverter as cores
   dela, ela pousa num disco luminoso -- que le melhor, como um
   instrumento contra o ceu, e nao depende de filtro de cor.
   ============================================================ */

/* O fundo e pintado aqui, nao no Elementor.

   Quarta vez que uma configuracao gravada direto no _elementor_data nao
   renderiza: background_background:gradient sai transparente, e a secao
   ficou com texto branco sobre branco -- contraste 1,0, invisivel.
   O classic funciona, o gradient nao. Como a marcacao desta secao e
   nossa, o fundo passa a ser responsabilidade nossa tambem: assim nao
   depende de nenhuma chave do Elementor para existir. */
.tribo-ceu {
	background:
		radial-gradient(1px 1px at 18% 24%, rgba(255,255,255,.5) 50%, transparent 51%),
		radial-gradient(1px 1px at 72% 14%, rgba(255,255,255,.38) 50%, transparent 51%),
		radial-gradient(1.4px 1.4px at 86% 62%, rgba(255,255,255,.46) 50%, transparent 51%),
		radial-gradient(1px 1px at 34% 78%, rgba(255,255,255,.32) 50%, transparent 51%),
		radial-gradient(120% 100% at 50% 0%, #1B3D69 0%, #0E2544 52%, #071528 100%);
	background-size: 330px 330px, 460px 460px, 520px 520px, 380px 380px, 100% 100%;
	border-radius: 24px;
	padding: var(--e-8) var(--e-7);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--e-8);
	align-items: center;
	max-width: var(--container);
	margin-inline: auto;
}

/* O disco: fundo claro sob a roda, com halo azul ao redor. */
.tribo-ceu__roda {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: 6%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 42%, #FFFFFF 0%, #F2F6FC 62%, #E6EEF9 100%);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, .16),
		0 0 60px rgba(120, 170, 255, .22),
		0 30px 70px rgba(0, 0, 0, .45);
}

.tribo-ceu__roda svg {
	width: 100%;
	height: auto;
	display: block;
}

.tribo-ceu__rotulo {
	display: inline-block;
	margin-bottom: var(--e-3);
	padding: 3px 10px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .12);
	color: #CFE0F7;
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.tribo-ceu__titulo {
	margin-bottom: var(--e-3);
	color: #FFFFFF;
	font-size: var(--t-2xl);
}

.tribo-ceu__lead {
	max-width: 46ch;
	margin-bottom: var(--e-6);
	color: rgba(222, 234, 250, .82);
}

/* A legenda: nome a esquerda, posicao a direita, ligados por uma linha
   pontilhada. E leitura de tabela, nao de lista -- o olho compara. */
.tribo-ceu__lista {
	list-style: none;
	margin: 0 0 var(--e-5);
	padding: 0;
	max-width: 34ch;
}

.tribo-ceu__item {
	display: flex;
	align-items: baseline;
	gap: var(--e-3);
	padding: 9px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.tribo-ceu__item:last-child { border-bottom: 0; }

.tribo-ceu__nome {
	flex: 0 0 auto;
	color: rgba(222, 234, 250, .72);
	font-size: var(--t-sm);
}

.tribo-ceu__lugar {
	margin-left: auto;
	font-family: var(--fonte-titulo);
	font-size: var(--t-md);
	color: #FFFFFF;
}

/* Cor por elemento: a mesma linguagem dos doze signos, agora aplicada
   a posicao real dos planetas. */
.tribo-ceu__item--fogo  .tribo-ceu__lugar { color: #FF8A8C; }
.tribo-ceu__item--terra .tribo-ceu__lugar { color: #6FD79A; }
.tribo-ceu__item--ar    .tribo-ceu__lugar { color: #FFD166; }
.tribo-ceu__item--agua  .tribo-ceu__lugar { color: #6FC9F0; }

.tribo-ceu__retro {
	display: inline-block;
	margin-left: 4px;
	padding: 0 4px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .14);
	font-size: .7em;
	vertical-align: super;
}

.tribo-ceu__marca {
	margin-bottom: var(--e-5);
	color: rgba(222, 234, 250, .55);
	font-size: var(--t-xs);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
	.tribo-ceu {
		grid-template-columns: 1fr;
		gap: var(--e-6);
		padding: var(--e-6) var(--e-5);
		border-radius: 18px;
	}

	/* No celular a roda vem depois do texto: sem saber o que e, ela e
	   so um circulo cheio de simbolos. */
	.tribo-ceu__roda { order: 2; max-width: 400px; margin-inline: auto; }
	.tribo-ceu__texto { order: 1; }
}

/* ============================================================
   Fundo do ceu: garantia
   ------------------------------------------------------------
   A regra acima e valida -- o navegador confirmou ter interpretado as
   cinco camadas -- e mesmo assim o fundo computado saia "none", enquanto
   padding e border-radius da MESMA regra aplicavam. A secao ficava com
   texto branco sobre branco: contraste 1,0, invisivel.

   Em vez de continuar procurando a causa, a regra abaixo remove a
   possibilidade do defeito:

     - background-color solido primeiro. Se toda camada de gradiente
       falhar, a secao continua escura e o texto continua legivel. Nunca
       branco sobre branco.
     - propriedades separadas, sem a forma abreviada.
     - prefixo html, que vence qualquer seletor de classe.
   ============================================================ */

html .tribo-ceu {
	background-color: #0B1E38;
	background-image:
		radial-gradient(1px 1px at 18% 24%, rgba(255, 255, 255, .50) 50%, transparent 51%),
		radial-gradient(1px 1px at 72% 14%, rgba(255, 255, 255, .38) 50%, transparent 51%),
		radial-gradient(1.4px 1.4px at 86% 62%, rgba(255, 255, 255, .46) 50%, transparent 51%),
		radial-gradient(1px 1px at 34% 78%, rgba(255, 255, 255, .32) 50%, transparent 51%),
		radial-gradient(120% 100% at 50% 0%, #1B3D69 0%, #0E2544 52%, #071528 100%);
	background-size: 330px 330px, 460px 460px, 520px 520px, 380px 380px, 100% 100%;
	background-repeat: repeat, repeat, repeat, repeat, no-repeat;
}

/* ============================================================
   12. Primeira Luz: o heroi
   ------------------------------------------------------------
   Era ceu noturno com a Via Lactea e texto branco. Ceu noturno e
   imponente -- e imponente nao acolhe, que foi exatamente a critica.

   Agora a luz sobe do horizonte. Mesmo azul da marca, mesma
   astronomia, temperatura oposta.

   O identificador do elemento e frouxo de proposito conhecido: se o
   heroi for reconstruido no editor, o id muda e a regra para de valer.
   A falha e segura -- volta ao azul solido definido no Elementor, que
   ainda e claro, entao o texto escuro continua legivel.
   ============================================================ */

html .elementor-element-22378d4 {
	position: relative;
	overflow: hidden;
	background-color: #E9F0F7;
	background-image:
		radial-gradient(120% 88% at 12% 108%, rgba(247, 200, 154, .92) 0%, rgba(247, 200, 154, 0) 56%),
		radial-gradient(96% 76% at 88% 100%, rgba(243, 217, 228, .85) 0%, rgba(243, 217, 228, 0) 58%),
		linear-gradient(168deg, #CFE0F2 0%, #E7EEF6 42%, #F6F1EA 100%);
}

/* O sol baixo foi removido.

   A regra dava width, height e border-radius ao ::before do container --
   que o Elementor ja usa para sobreposicao de fundo. As medidas pegaram,
   o gradiente nao, e sobrou o fundo do Elementor recortado num disco
   cinza de 460px em cima do titulo.

   O amanhecer do proprio container ja da o calor. Nao vale reintroduzir
   o sol disputando pseudo-elemento com o construtor. */
html .elementor-element-22378d4 > * { position: relative; z-index: 1; }

/* O rotulo de abertura: era ciano claro sobre noite. */
html .elementor-element-2026d51,
html .elementor-element-2026d51 p {
	color: var(--agua);
	font-size: var(--t-sm);
	font-weight: 600;
	letter-spacing: .06em;
}

/* O paragrafo diferencial. */
html .elementor-element-0b25bf8,
html .elementor-element-0b25bf8 p {
	color: #4A5568;
	font-size: 18.5px;
}

/* ---- As tres provas, agora sobre luz ---- */

html .tribo-provas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--e-6);
}

/* Deixam de ser lista com barrinha e viram selos macios: a forma
   arredondada acolhe onde a barra vertical apontava. */
html .tribo-prova {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 17px 10px 13px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .74);
	color: #46536A;
	font-size: 14.5px;
	line-height: 1.35;
}

html .tribo-prova strong {
	display: inline;
	color: var(--tinta);
	font-weight: 600;
}

html .tribo-prova::before {
	position: static;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: 0 0 auto;
}

html .tribo-prova--1::before { background: var(--chakra-laringeo); }
html .tribo-prova--2::before { background: var(--chakra-sacral); }
html .tribo-prova--3::before { background: var(--chakra-cardiaco); }

/* O container do heroi nao deve ter sobreposicao nenhuma. */
html .elementor-element-22378d4::before,
html .elementor-element-22378d4::after {
	background: none;
	content: none;
}

/* ---- Titulo do heroi ----
   A tipografia global do Elementor ainda manda Philosopher e a cor de
   destaque. Fraunces e a tinta morna precisam vencer, e o prefixo html
   e o mecanismo que ja provou funcionar neste projeto. */
html .elementor-element-22378d4 h1,
html .elementor-element-22378d4 h1 a {
	font-family: var(--fonte-titulo);
	font-weight: 300;
	font-variation-settings: "SOFT" 40, "WONK" 1;
	color: #22304A;
	font-size: clamp(38px, 5.4vw, 58px);
	line-height: 1.04;
	letter-spacing: -.02em;
}

/* ============================================================
   13. Fotografia no heroi
   ------------------------------------------------------------
   Ate aqui o heroi era gradiente, e era a maior diferenca visual
   para a referencia do nicho -- que abre com fotografia de pessoa
   em luz dourada.

   A foto e generica por ora, para ser trocada pelas do cliente.
   Por isso ela entra por CSS num arquivo so: a substituicao e
   trocar uma URL, sem mexer em layout.

   O VEU e obrigatorio, nao enfeite. O texto do heroi e escuro
   (#22304A) porque nasceu para o gradiente claro; sobre foto em
   meio-tom ele perderia contraste. O degrade branco da esquerda
   garante fundo claro atras da coluna de texto e deixa a foto
   aparecer inteira do lado do cartao.
   ============================================================ */

html .elementor-element-22378d4 {
	background-color: #E9F0F7;
	background-image:
		linear-gradient(96deg, rgba(252,250,247,.96) 0%, rgba(252,250,247,.88) 26%, rgba(252,250,247,.42) 52%, rgba(252,250,247,.06) 74%, rgba(252,250,247,0) 100%),
		url("/wp-content/uploads/tribo/heroi-amanhecer.jpg");
	background-size: cover, cover;
	background-position: center, center 38%;
	background-repeat: no-repeat, no-repeat;
}

/* No celular as colunas empilham e o texto ocupa a largura toda, entao
   o veu precisa vir de cima e cobrir mais, nao da esquerda. */
@media (max-width: 900px) {
	html .elementor-element-22378d4 {
		background-image:
			linear-gradient(180deg, rgba(252,250,247,.95) 0%, rgba(252,250,247,.86) 42%, rgba(252,250,247,.55) 72%, rgba(252,250,247,.35) 100%),
			url("/wp-content/uploads/tribo/heroi-amanhecer.jpg");
	}
}