@charset "UTF-8";
/**
 * Sistema de design da Tribo das Estrelas.
 *
 * DIRECAO: Primeira Luz, aprovada em 31/08/2026.
 *
 * A versao anterior era ceu noturno -- azul-marinho, neutros cinza-azulados,
 * Philosopher solene. Estava correta e fria. O cliente pediu acolhimento, e
 * ceu noturno e imponente, nao acolhedor.
 *
 * Esta versao troca a noite pelo amanhecer. Mesmo azul da marca, mesma
 * astronomia, mesma estrutura. O que muda e de onde vem a luz: do horizonte,
 * quente, subindo -- em vez de faltar.
 *
 * Tres decisoes carregam a mudanca:
 *
 *   1. Os neutros ganharam leite e areia. Branco clinico e o que faz um site
 *      parecer consultorio. Papel morno acolhe.
 *   2. Fraunces e Figtree no lugar de Philosopher e Lato: serifa macia com
 *      leve desalinho, e sem-serifa redonda. Mesmo trabalho, outro humor.
 *   3. Menos borda, mais sombra macia, cantos generosos.
 *
 * NOTA DE SINTAXE: comentarios em ASCII puro. O servidor entrega CSS sem
 * declarar charset; um caractere multibyte faz o navegador parar de
 * interpretar e descartar todo o resto do arquivo. Ja custou horas neste
 * projeto. Manter ASCII.
 */

/* ============================================================
   1. Tokens
   ============================================================ */

:root {
	/* ---- Papel e luz ----
	   O branco puro sai de cena. Estes tres sao a base morna sobre a qual
	   tudo se apoia. */
	--papel: #FCFAF7;
	--leite: #F6F1EA;
	--areia: #EFE7DC;

	/* ---- Amanhecer ---- */
	--ceu-alto: #CFE0F2;
	--ceu-baixo: #EBDCCB;
	--brilho: #F7C89A;
	--rubor: #F3D9E4;

	/* ---- Agua: o azul da marca em tres profundidades ---- */
	--agua: #2C5182;
	--agua-clara: #4E7EB8;
	--acao: #004AAD;
	--acao-forte: #003A88;
	--acao-tenue: #E6EEF9;

	/* ---- Tinta ----
	   Neutros puxados para o quente, nao para o azul. Um cinza frio ao lado
	   de areia parece sujeira; um cinza morno parece escolhido. */
	--tinta: #2B3340;
	--tinta-media: #4A5568;
	--tinta-suave: #5C6470;
	--linha: #E4DDD3;
	--linha-clara: #EFE9E1;
	--branco: #FFFFFF;

	/* ---- Nomes estabelecidos ----
	   visual.css e layout.css ja falam nestes nomes. Trocar os nomes junto
	   com os valores quebraria as duas camadas inteiras de uma vez, entao
	   eles continuam sendo a interface publica do sistema -- o que muda e
	   para onde apontam. Amanhecer em vez de noite. */
	--azul: var(--acao);
	--azul-claro: var(--agua-clara);
	--azul-escuro: var(--acao-forte);
	--azul-tenue: var(--acao-tenue);
	--titulo: var(--tinta);
	--texto: var(--tinta-media);
	--silencio: var(--tinta-suave);
	--superficie: var(--leite);

	/* ---- Chakras, em versao amanhecida ----
	   As sete cores continuam, com a saturacao baixada para conversarem com
	   o papel morno em vez de gritarem sobre ele. */
	--chakra-raiz: #E2635F;
	--chakra-sacral: #E8964A;
	--chakra-plexo: #D9B93C;
	--chakra-cardiaco: #4E9E6E;
	--chakra-laringeo: #4B9DC4;
	--chakra-frontal: #8B6BB0;
	--chakra-coronario: #C06CA8;

	/* Versoes legiveis como texto sobre papel claro. */
	--chakra-raiz-texto: #C44B47;
	--chakra-sacral-texto: #96571B;
	--chakra-plexo-texto: #8A7418;
	--chakra-cardiaco-texto: #35784F;
	--chakra-laringeo-texto: #286C88;
	--chakra-frontal-texto: #6E4F92;

	/* ---- Tipografia ----
	   Fraunces tem eixo optico e um desalinho proposital que tira a
	   solenidade da serifa. Figtree e redonda e direta, sem a neutralidade
	   de escritorio das grotescas de sistema. */
	--fonte-titulo: "Fraunces", Georgia, "Times New Roman", serif;
	--fonte-texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

	--t-xs: 0.8125rem;
	--t-sm: 0.9375rem;
	--t-base: 1.0625rem;
	--t-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	--t-lg: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	--t-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	--t-2xl: clamp(2.125rem, 1.6rem + 2.4vw, 3.25rem);
	--t-3xl: clamp(2.5rem, 1.7rem + 3.4vw, 3.875rem);

	/* ---- Ritmo ---- */
	--e-1: 4px;
	--e-2: 8px;
	--e-3: 12px;
	--e-4: 16px;
	--e-5: 24px;
	--e-6: 32px;
	--e-7: 48px;
	--e-8: 64px;
	--e-9: 96px;

	/* ---- Forma: mais generosa que antes ---- */
	--r-sm: 10px;
	--r: 14px;
	--r-lg: 20px;
	--r-xl: 34px;
	--r-pill: 999px;

	/* Sombras mornas, nao azuladas. */
	--sombra: 0 1px 3px rgba(43, 51, 64, .05);
	--sombra-media: 0 2px 4px rgba(43, 51, 64, .04), 0 10px 26px rgba(43, 51, 64, .07);
	--sombra-alta: 0 2px 4px rgba(43, 51, 64, .04), 0 18px 44px rgba(43, 51, 64, .11);

	--transicao: .2s ease;

	--leitura: 66ch;
	--container: 1160px;
}

/* ============================================================
   2. Base
   ============================================================ */

body {
	background: var(--papel);
	color: var(--tinta-media);
	font-family: var(--fonte-texto);
	font-size: var(--t-base);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fonte-titulo);
	font-weight: 300;
	/* Fraunces e variavel: SOFT arredonda os terminais, WONK inclina o
	   italico e tira a rigidez. E o que faz a serifa acolher em vez de
	   impor. */
	font-variation-settings: "SOFT" 40, "WONK" 1;
	color: var(--tinta);
	line-height: 1.12;
	letter-spacing: -.015em;
	text-wrap: balance;
	margin: 0 0 var(--e-3);
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
h5 { font-size: var(--t-md); }
h6 { font-size: var(--t-base); }

p { margin: 0 0 var(--e-4); }

a {
	color: var(--acao);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: color var(--transicao);
}

a:hover,
a:focus {
	color: var(--acao-forte);
}

strong { color: var(--tinta); font-weight: 600; }

::selection {
	background: var(--brilho);
	color: var(--tinta);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--acao);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

/* ============================================================
   3. Layout
   ============================================================ */

.tribo-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--e-5);
}

.tribo-page,
.entry-content > .tribo-page {
	max-width: var(--leitura);
	margin-inline: auto;
}

.tribo-page h2 { margin-top: 2em; }
.tribo-page h2:first-child { margin-top: 0; }
.tribo-page h3 { margin-top: 1.6em; }

.site-main {
	padding-block: var(--e-8);
}

@media (max-width: 767px) {
	.site-main { padding-block: var(--e-6); }
}

/* ============================================================
   4. Botoes
   ============================================================ */

.tribo-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.pmpro_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2);
	min-height: 50px;
	padding: var(--e-3) var(--e-6);
	border: 0;
	border-radius: var(--r);
	background: var(--acao);
	color: var(--branco);
	font-family: var(--fonte-texto);
	font-size: var(--t-base);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}

.tribo-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.pmpro_btn:hover {
	background: var(--acao-forte);
	color: var(--branco);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(0, 74, 173, .22);
}

.tribo-btn--linha {
	background: var(--branco);
	color: var(--acao);
	box-shadow: inset 0 0 0 1px var(--linha);
}

.tribo-btn--linha:hover {
	background: var(--acao-tenue);
	color: var(--acao-forte);
	box-shadow: inset 0 0 0 1px rgba(0, 74, 173, .28);
}

/* ============================================================
   5. Formularios
   ------------------------------------------------------------
   Campo com fundo levemente mais claro que o papel, borda macia e
   canto generoso. Caixa de contorno duro pertence a formulario de
   cartorio, nao a um convite.
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
	width: 100%;
	min-height: 50px;
	padding: var(--e-3) var(--e-4);
	border: 1px solid var(--linha);
	border-radius: var(--r);
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--fonte-texto);
	font-size: var(--t-base);
	transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--acao);
	background: var(--branco);
	box-shadow: 0 0 0 4px var(--acao-tenue);
	outline: none;
}

::placeholder { color: var(--tinta-suave); opacity: 1; }

label {
	display: inline-block;
	margin-bottom: var(--e-2);
	color: var(--tinta-media);
	font-size: var(--t-sm);
	font-weight: 500;
}

/* ============================================================
   6. Cartoes
   ============================================================ */

.tribo-card {
	padding: var(--e-6);
	border: 0;
	border-radius: var(--r-lg);
	background: var(--branco);
	box-shadow: var(--sombra-media);
	transition: transform var(--transicao), box-shadow var(--transicao);
}

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

/* ============================================================
   7. WooCommerce e PMPro
   ============================================================ */

.woocommerce-page .site-main,
.pmpro_page .site-main {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--e-5);
}

.woocommerce ul.products li.product {
	padding: var(--e-5);
	border: 0;
	border-radius: var(--r-lg);
	background: var(--branco);
	box-shadow: var(--sombra-media);
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
	border-top-color: var(--acao);
	background: var(--leite);
}

.woocommerce .woocommerce-error {
	border-top-color: var(--chakra-raiz-texto);
	background: var(--leite);
}

table.shop_table,
#pmpro_levels_table,
.pmpro_table {
	width: 100%;
	border: 1px solid var(--linha);
	border-radius: var(--r);
	border-collapse: collapse;
	overflow: hidden;
}

table.shop_table th,
.pmpro_table th {
	background: var(--leite);
	color: var(--tinta);
	font-family: var(--fonte-texto);
	font-weight: 600;
}

table.shop_table td,
table.shop_table th,
.pmpro_table td,
.pmpro_table th {
	padding: var(--e-3) var(--e-4);
	border-bottom: 1px solid var(--linha-clara);
	text-align: left;
}

.woocommerce table.shop_table_responsive,
.pmpro_table_wrapper {
	display: block;
	overflow-x: auto;
}

.woocommerce .price,
.woocommerce span.amount {
	color: var(--tinta);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   8. Acessibilidade
   ============================================================ */

.tribo-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999999;
	padding: var(--e-3) var(--e-5);
	background: var(--acao);
	color: var(--branco);
	border-radius: 0 0 var(--r) 0;
	text-decoration: none;
}

.tribo-skip:focus {
	left: 0;
	color: var(--branco);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   9. Ritmo vertical: garantia
   ------------------------------------------------------------
   Medido em 31/08/2026: das doze secoes da home, onze mediam
   padding-block ZERO. O respiro gravado no _elementor_data nao
   renderiza -- mesma familia de falha do gradiente e das classes.
   As secoes se encostavam, e era isso que dava a sensacao de
   pagina apertada.

   O respiro passa a vir daqui. Prefixo html para vencer a folha
   que o Elementor gera por pagina.
   ============================================================ */

html .elementor > .e-con,
html .elementor > .elementor-section {
	padding-block: var(--e-9);
}

@media (max-width: 900px) {
	html .elementor > .e-con,
	html .elementor > .elementor-section {
		padding-block: var(--e-7);
	}
}

/* Cabecalho e rodape sao templates do Elementor e tem ritmo proprio. */
html .elementor-location-header > .e-con,
html .elementor-location-footer > .e-con {
	padding-block: revert;
}

/* ============================================================
   10. Escala tipografica: garantia
   ------------------------------------------------------------
   Medido junto: h2 e h3 sairam AMBOS em 28px. A tipografia global
   do Elementor sobrescreve os tamanhos definidos aqui, e o
   resultado e uma pagina sem hierarquia -- titulo de secao com o
   mesmo peso de titulo de cartao.

   Sem hierarquia o olho nao sabe onde comeca cada coisa, e a
   pagina le como um bloco unico por mais espaco que tenha.
   ============================================================ */

html h1, html .elementor-widget-heading h1 {
	font-family: var(--fonte-titulo);
	font-size: var(--t-3xl);
	font-weight: 300;
	line-height: 1.06;
	letter-spacing: -.02em;
}

html h2, html .elementor-widget-heading h2 {
	font-family: var(--fonte-titulo);
	font-size: var(--t-2xl);
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: -.018em;
}

html h3, html .elementor-widget-heading h3 {
	font-family: var(--fonte-titulo);
	font-size: var(--t-xl);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -.01em;
}

html h4, html .elementor-widget-heading h4 {
	font-family: var(--fonte-titulo);
	font-size: var(--t-lg);
	font-weight: 400;
	line-height: 1.25;
}

/* O texto corrido tambem: o kit define 15px, pequeno para leitura. */
html .elementor-widget-text-editor,
html .elementor-widget-text-editor p {
	font-family: var(--fonte-texto);
	font-size: var(--t-base);
	line-height: 1.7;
}

/* Respiro depois de um titulo de secao, antes do que ele apresenta. */
html .elementor-widget-heading { margin-bottom: var(--e-3); }

/* ============================================================
   11. Hierarquia dentro dos componentes
   ------------------------------------------------------------
   Medido depois do ajuste: ainda havia h2 e h3 empatados em 28px.
   Sao os titulos DENTRO de cartao, modulo e pilar -- ali a escala
   fluida colapsa no minimo e os dois niveis se encontram.

   Titulo de secao e titulo de peca fazem trabalhos diferentes e
   precisam de tamanhos diferentes, senao o olho nao sabe o que
   abre um bloco e o que abre um item dentro dele.
   ============================================================ */

html .tribo-card h3,
html .tribo-modulo h3,
html .tribo-pilar h3,
html .tribo-post__titulo,
html .tribo-atalho__nome,
html .tribo-principio h3 {
	font-size: 20px;
	line-height: 1.28;
	letter-spacing: -.008em;
}

/* Titulo de secao ganha mais ar antes do conteudo que apresenta. */
html .tribo-secao-titulo {
	margin-bottom: var(--e-4);
}

/* O texto de apoio da secao respira mais antes da grade. */
html .tribo-blog__subtitulo,
html .tribo-areas__titulo {
	margin-bottom: var(--e-6);
}

/* Cartoes: mais respiro interno. 32px era justo para o que eles
   carregam agora. */
html .tribo-card,
html .tribo-modulo {
	padding: var(--e-7) var(--e-6);
}

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

/* Grades: o vao de 24px apertava com cartoes maiores. */
html .tribo-grade,
html .tribo-modulos {
	gap: var(--e-6);
}

/* ============================================================
   12. Folga lateral
   ------------------------------------------------------------
   Medido: 63px de margem a esquerda contra 78 a direita, com
   apenas 20px de respiro nas secoes. A assimetria vem da barra de
   rolagem; o aperto vem do respiro curto.

   scrollbar-gutter reserva o espaco da barra dos dois lados, o
   que corrige a assimetria de vez -- inclusive nas paginas curtas,
   onde a barra some e a pagina inteira desloca alguns pixels.
   ============================================================ */

html {
	scrollbar-gutter: stable;
}

html .elementor > .e-con,
html .elementor > .elementor-section {
	padding-inline: var(--e-7);
}

@media (max-width: 900px) {
	html .elementor > .e-con,
	html .elementor > .elementor-section {
		padding-inline: var(--e-5);
	}
}

/* Container um pouco mais estreito: com o respiro maior, 1160 fazia o
   conteudo encostar de novo nas telas de 1280. */
/* O Elementor define a largura do conteudo pela variavel --content-width
   e vence um max-width posto de fora. Entao a largura passa pela
   variavel dele: trabalha com o construtor em vez de contra.

   1080 em vez de 1140 da 30px a mais de folga de cada lado nas telas
   de 1280, que era a queixa. */
html .elementor > .e-con {
	--content-width: 1080px;
}

html .tribo-container {
	max-width: 1080px;
}

/* ============================================================
   13. Modulos em uma linha so
   ------------------------------------------------------------
   Eram quatro cartoes com auto-fit e minimo de 268px. Quatro
   colunas pediam 1168px e havia 1140: o auto-fit desistia e
   devolvia tres, deixando o quarto sozinho na linha de baixo.

   Numero de colunas fixo por faixa resolve. Quatro em tela larga,
   dois em tablet, um no celular -- sem nunca deixar orfao.
   ============================================================ */

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

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

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

/* Com quatro colunas o cartao fica estreito: menos folga interna
   horizontal, para o texto nao virar coluna de uma palavra. */
html .tribo-modulo {
	padding: var(--e-6) var(--e-5);
}

/* A faixa de atalhos tem o mesmo problema com cinco itens. */
html .tribo-atalhos {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

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