/**
 * Estilos do Tribo das Estrelas.
 *
 * Os tokens herdam as cores globais do Elementor. Isso e o que permite o
 * cliente trocar a paleta em Configuracoes do Site e o mapa astral acompanhar
 * sozinho, sem ninguem tocar em codigo.
 *
 * Cada token tem valor de reserva depois da virgula: se o Elementor sair do ar
 * ou a cor global for removida, o plugin continua apresentavel em vez de
 * herdar preto sobre preto.
 *
 * Nao ha modo escuro automatico por preferencia do sistema. Com paleta
 * definida pela marca, quem manda na aparencia e o cliente -- e nao a
 * configuracao do sistema operacional de quem visita. Se um dia a marca for
 * escura, basta trocar as cores globais.
 */

/* Tokens no :root para que as paginas institucionais, que nao ficam dentro de
   .tribo-app, tambem os enxerguem. */
:root {
	--tribo-bg: var(--e-global-color-tribofundo, #ffffff);
	--tribo-surface: var(--e-global-color-tribosuperf, #f4f7fc);
	--tribo-text: var(--e-global-color-text, #2a2f3a);
	--tribo-muted: var(--e-global-color-tribosilencio, #5a6375);
	--tribo-line: var(--e-global-color-tribolinha, #dbe3f2);
	--tribo-accent: var(--e-global-color-accent, #004aad);
	--tribo-primary: var(--e-global-color-primary, #004aad);

	/* Semanticos: nao seguem a marca de proposito. Erro precisa parecer erro
	   e retrogrado precisa se destacar, qualquer que seja a paleta. */
	--tribo-danger: #b3382b;
	--tribo-retro: #b3382b;

	/* ---- Sistema de dois niveis das cores de chakra ----
	   O contraste sobre branco decide o papel de cada uma, e nao o gosto:

	     puro  -> preenchimento, barra, selo. Amarelo puro da 1,20:1; como
	              letra ou linha fina ele simplesmente nao e visto.
	     texto -> mesma familia, escurecida ate passar 4,5:1. Usada em glifo,
	              rotulo e icone.

	   Por isso um elemento tem duas variaveis, e nao uma. */
	--tribo-fogo-puro: var(--e-global-color-chakraraiz, #fe3034);
	--tribo-terra-puro: var(--e-global-color-chakracardiac, #019740);
	--tribo-ar-puro: var(--e-global-color-chakraplexo, #fbef21);
	--tribo-agua-puro: var(--e-global-color-chakralaringe, #00ade5);

	--tribo-fogo: var(--e-global-color-tribofogo, #e22b2e);
	--tribo-terra: var(--e-global-color-triboterra, #01893a);
	--tribo-ar: var(--e-global-color-triboar, #7d7710);
	--tribo-agua: var(--e-global-color-triboagua, #0080a9);

	/* Chakras restantes, disponiveis para destaque e categoria. */
	--tribo-sacral: var(--e-global-color-chakrasacral, #ff9822);
	--tribo-frontal: var(--e-global-color-chakrafrontal, #773c9a);
	--tribo-coroa: var(--e-global-color-chakracoroa, #ab3895);

	/* Aspectos: fluido no verde do cardiaco, tenso no vermelho da raiz,
	   conjuncao no azul da marca. Todos na versao legivel, porque sao linhas
	   finas dentro da roda. */
	--tribo-aspect-conj: var(--e-global-color-accent, #004aad);
	--tribo-aspect-tenso: var(--e-global-color-tribofogo, #e22b2e);
	--tribo-aspect-fluido: var(--e-global-color-triboterra, #01893a);
	--tribo-aspect-menor: var(--e-global-color-tribosilencio, #5a6375);

	--tribo-radius: 10px;
}

/* Layout do bloco do mapa. Separado dos tokens de proposito: aqui entram
   propriedades que nao podem vazar para o resto do site. */
.tribo-app {
	color: var(--tribo-text);
	max-width: 62rem;
	margin-inline: auto;
	font-size: 1rem;
	line-height: 1.6;
}

.tribo-app *,
.tribo-app *::before,
.tribo-app *::after {
	box-sizing: border-box;
}

/* ---------- formulario ---------- */

.tribo-form {
	background: var(--tribo-surface);
	border: 1px solid var(--tribo-line);
	border-radius: var(--tribo-radius);
	padding: clamp(1.25rem, 4vw, 2.25rem);
}

.tribo-form__title {
	margin: 0 0 .35rem;
	font-size: clamp(1.5rem, 4vw, 2rem);
	line-height: 1.2;
}

.tribo-form__lead {
	margin: 0 0 1.75rem;
	color: var(--tribo-muted);
}

.tribo-field {
	margin-bottom: 1.25rem;
}

.tribo-field-row {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 1rem;
}

@media (max-width: 30rem) {
	.tribo-field-row {
		grid-template-columns: 1fr;
	}
}

.tribo-field label {
	display: block;
	margin-bottom: .4rem;
	font-weight: 600;
	font-size: .95rem;
}

.tribo-field__hint {
	font-weight: 400;
	color: var(--tribo-muted);
	font-size: .85em;
}

.tribo-field__note {
	margin: .4rem 0 0;
	font-size: .85rem;
	color: var(--tribo-muted);
	line-height: 1.5;
}

.tribo-field input[type="text"],
.tribo-field input[type="date"],
.tribo-field input[type="time"],
.tribo-field select {
	width: 100%;
	padding: .7rem .85rem;
	font: inherit;
	font-size: 1rem;
	color: var(--tribo-text);
	background: var(--tribo-bg);
	border: 1px solid var(--tribo-line);
	border-radius: 8px;
}

.tribo-field input:focus-visible,
.tribo-field select:focus-visible,
.tribo-button:focus-visible {
	outline: 2px solid var(--tribo-accent);
	outline-offset: 2px;
}

.tribo-field input[disabled] {
	opacity: .5;
}

.tribo-field--check label {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-weight: 400;
	cursor: pointer;
}

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

/* ---------- autocompletar ---------- */

.tribo-field--place {
	position: relative;
}

.tribo-suggest {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	margin: .25rem 0 0;
	padding: 0;
	list-style: none;
	background: var(--tribo-bg);
	border: 1px solid var(--tribo-line);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
	max-height: 17rem;
	overflow-y: auto;
}

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

/* 44px minimo: e o alvo de toque abaixo do qual o dedo erra. A lista de
   cidades e usada quase toda no celular, entao aqui isso nao e detalhe. */
.tribo-suggest li {
	min-height: 44px;
	padding: .7rem .85rem;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: center;
	border-bottom: 1px solid var(--tribo-line);
}

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

.tribo-suggest li:hover,
.tribo-suggest li[aria-selected="true"] {
	background: var(--tribo-surface);
}

.tribo-suggest__tz {
	font-size: .78rem;
	color: var(--tribo-muted);
	white-space: nowrap;
}

/* ---------- botoes e avisos ---------- */

.tribo-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .8rem 1.6rem;
	font: inherit;
	font-weight: 600;
	color: var(--tribo-bg);
	background: var(--tribo-accent);
	border: 1px solid var(--tribo-accent);
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
}

.tribo-button:hover {
	filter: brightness(1.08);
}

.tribo-button--ghost {
	color: var(--tribo-accent);
	background: transparent;
}

.tribo-alert {
	margin: 0 0 1.25rem;
	padding: .75rem 1rem;
	border-radius: 8px;
	border: 1px solid var(--tribo-danger);
	color: var(--tribo-danger);
	background: color-mix(in srgb, var(--tribo-danger) 8%, transparent);
	font-size: .92rem;
}

.tribo-alert--soft {
	border-color: var(--tribo-line);
	color: var(--tribo-muted);
	background: var(--tribo-surface);
}

.tribo-button--wide {
	width: 100%;
	text-align: center;
	font-size: 1.05rem;
	padding: .95rem 1.6rem;
}

/* ---------- agrupamentos ---------- */

.tribo-fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 1.75rem;
}

.tribo-fieldset legend {
	padding: 0;
	margin-bottom: 1rem;
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--tribo-muted);
}

.tribo-field__error {
	margin: .35rem 0 0;
	font-size: .85rem;
	color: var(--tribo-danger);
}

.tribo-field [aria-invalid="true"] {
	border-color: var(--tribo-danger);
}

/* O consentimento precisa ser legivel, nao letra miuda escondida: consentimento
   obtido em texto ilegivel nao vale como consentimento. */
.tribo-consent {
	background: var(--tribo-bg);
	border: 1px solid var(--tribo-line);
	border-radius: 8px;
	padding: .85rem 1rem;
}

.tribo-consent label {
	align-items: flex-start;
	gap: .65rem;
	font-size: .9rem;
	line-height: 1.5;
}

.tribo-consent input {
	margin-top: .2rem;
	flex-shrink: 0;
}

.tribo-advanced {
	margin-bottom: 1.5rem;
	border-top: 1px solid var(--tribo-line);
	padding-top: 1rem;
}

.tribo-advanced summary {
	cursor: pointer;
	font-weight: 600;
	font-size: .92rem;
	color: var(--tribo-muted);
	margin-bottom: 1rem;
}

/* ---------- resultado ---------- */

.tribo-result__header {
	text-align: center;
	margin-bottom: 2rem;
}

.tribo-result__title {
	margin: 0 0 .4rem;
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	line-height: 1.2;
}

.tribo-result__meta {
	margin: 0 0 .3rem;
	color: var(--tribo-text);
}

.tribo-result__tech {
	margin: 0;
	font-size: .85rem;
	color: var(--tribo-muted);
}

.tribo-sep {
	color: var(--tribo-muted);
	margin-inline: .4rem;
}

.tribo-badge {
	display: inline-block;
	margin-left: .5rem;
	padding: .12rem .5rem;
	font-size: .78rem;
	border-radius: 999px;
	border: 1px solid var(--tribo-accent);
	color: var(--tribo-accent);
}

.tribo-wheel-wrap {
	max-width: 40rem;
	margin: 0 auto 2.5rem;
}

.tribo-section {
	margin-bottom: 2.5rem;
}

.tribo-section h3 {
	margin: 0 0 1rem;
	font-size: 1.2rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--tribo-line);
}

.tribo-angles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: .75rem;
}

.tribo-angle {
	background: var(--tribo-surface);
	border: 1px solid var(--tribo-line);
	border-radius: 8px;
	padding: .75rem .9rem;
}

.tribo-angle__label {
	display: block;
	font-size: .8rem;
	color: var(--tribo-muted);
	margin-bottom: .2rem;
}

.tribo-angle__value {
	font-weight: 600;
}

.tribo-glyph {
	font-size: 1.15em;
	margin-right: .25em;
}

.tribo-glyph--fogo  { color: var(--tribo-fogo); }
.tribo-glyph--terra { color: var(--tribo-terra); }
.tribo-glyph--ar    { color: var(--tribo-ar); }
.tribo-glyph--agua  { color: var(--tribo-agua); }

/* ---------- leitura interpretativa ---------- */

.tribo-reading__block {
	margin-bottom: 1.75rem;
}

/* Sol, Lua e Ascendente ganham destaque pelo peso do bloco, nao por barra
   colorida na lateral. A barra e o tique mais reconhecivel de interface
   gerada por maquina, e aqui ela nao fazia trabalho nenhum: o titulo em cor
   de destaque ja separa o bloco do resto. */
.tribo-reading__block--highlight {
	background: var(--tribo-surface);
	border: 1px solid var(--tribo-line);
	border-radius: var(--tribo-radius);
	padding: 1.5rem 1.6rem;
}

.tribo-reading__block h4 {
	margin: 0 0 .5rem;
	font-size: 1.15rem;
	color: var(--tribo-accent);
}

.tribo-reading__block h5 {
	margin: 0 0 .4rem;
	font-size: 1rem;
	font-weight: 600;
}

.tribo-reading__lead {
	margin: 0 0 .75rem;
	font-size: 1.02rem;
	color: var(--tribo-text);
	font-style: italic;
}

/* Quais planetas caem naquela casa, ou quais pares fazem aquele aspecto.
   Discreto de proposito: e referencia, nao leitura. */
.tribo-reading__which {
	margin: 0 0 .6rem;
	font-size: .88rem;
	color: var(--tribo-accent);
}

.tribo-reading__body p {
	margin: 0 0 .85rem;
}

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

.tribo-reading__group {
	margin: 2.5rem 0 1.25rem;
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--tribo-muted);
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--tribo-line);
}

/* ---------- tabelas ---------- */

.tribo-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}

.tribo-table th,
.tribo-table td {
	padding: .6rem .5rem;
	text-align: left;
	border-bottom: 1px solid var(--tribo-line);
}

.tribo-table thead th {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tribo-muted);
	font-weight: 600;
}

.tribo-table tbody th {
	font-weight: 600;
}

.tribo-table--aspects .is-minor {
	color: var(--tribo-muted);
}

.tribo-retro {
	color: var(--tribo-retro);
	font-weight: 600;
}

.tribo-direct {
	color: var(--tribo-muted);
}

/* Tabela vira lista em tela estreita, para nao estourar a largura. */
@media (max-width: 34rem) {
	.tribo-table thead {
		display: none;
	}

	.tribo-table tr {
		display: block;
		padding: .6rem 0;
		border-bottom: 1px solid var(--tribo-line);
	}

	.tribo-table th,
	.tribo-table td {
		display: block;
		border: 0;
		padding: .15rem 0;
	}
}

/* ---------- distribuicao ---------- */

.tribo-dist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 2rem;
}

.tribo-dist__group h4 {
	margin: 0 0 .75rem;
	font-size: .95rem;
	color: var(--tribo-muted);
}

.tribo-bar {
	display: grid;
	grid-template-columns: 5.5rem 1fr 1.5rem;
	align-items: center;
	gap: .6rem;
	margin-bottom: .5rem;
	font-size: .9rem;
}

.tribo-bar__track {
	height: .5rem;
	background: var(--tribo-line);
	border-radius: 999px;
	overflow: hidden;
}

.tribo-bar__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--tribo-accent);
}

/* Barra e area preenchida, entao usa a cor de chakra pura. E o unico lugar do
   mapa onde o amarelo aparece na saturacao original, porque aqui ele nao
   precisa ser lido -- so comparado com as outras barras. */
.tribo-bar__fill--fogo  { background: var(--tribo-fogo-puro); }
.tribo-bar__fill--terra { background: var(--tribo-terra-puro); }
.tribo-bar__fill--ar    { background: var(--tribo-ar-puro); }
.tribo-bar__fill--agua  { background: var(--tribo-agua-puro); }

.tribo-bar__value {
	text-align: right;
	color: var(--tribo-muted);
	font-variant-numeric: tabular-nums;
}

.tribo-result__actions {
	text-align: center;
	margin-top: 2rem;
}

@media print {
	.tribo-result__actions,
	.tribo-advanced {
		display: none;
	}
}

/* ---------- paginas institucionais ---------- */

.tribo-hero,
.tribo-band,
.tribo-page {
	max-width: 62rem;
	margin-inline: auto;
	padding-inline: 1.25rem;
	color: var(--tribo-text);
	line-height: 1.65;
}

.tribo-hero {
	text-align: center;
	padding-block: clamp(3rem, 10vw, 6rem);
}

.tribo-hero__eyebrow {
	margin: 0 0 1rem;
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--tribo-accent);
}

.tribo-hero__title {
	margin: 0 0 1.25rem;
	font-size: clamp(2rem, 6vw, 3.4rem);
	line-height: 1.1;
	letter-spacing: -.02em;
}

.tribo-hero__lead {
	max-width: 42rem;
	margin: 0 auto 2rem;
	font-size: clamp(1.05rem, 2.2vw, 1.25rem);
	color: var(--tribo-muted);
}

.tribo-hero__cta {
	margin: 0 0 .75rem;
}

.tribo-hero__cta .tribo-button {
	width: auto;
	min-width: min(22rem, 100%);
}

.tribo-hero__note {
	margin: 0;
	font-size: .88rem;
	color: var(--tribo-muted);
}

.tribo-band {
	padding-block: clamp(2.5rem, 7vw, 4.5rem);
}

.tribo-band--alt {
	background: var(--tribo-surface);
	max-width: none;
}

.tribo-band--alt > * {
	max-width: 62rem;
	margin-inline: auto;
}

.tribo-band h2 {
	margin: 0 0 .85rem;
	font-size: clamp(1.5rem, 3.5vw, 2.1rem);
	line-height: 1.2;
}

.tribo-band__lead {
	max-width: 44rem;
	margin: 0 0 2.25rem;
	color: var(--tribo-muted);
	font-size: 1.05rem;
}

.tribo-band__cta {
	margin: 2rem 0 0;
}

.tribo-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.25rem;
}

.tribo-card {
	background: var(--tribo-surface);
	border: 1px solid var(--tribo-line);
	border-radius: var(--tribo-radius);
	padding: 1.4rem;
}

.tribo-band--alt .tribo-card {
	background: var(--tribo-bg);
}

.tribo-card h3 {
	margin: 0 0 .5rem;
	font-size: 1.1rem;
}

.tribo-card p {
	margin: 0;
	color: var(--tribo-muted);
}

.tribo-pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 2rem;
}

.tribo-pillar__mark {
	display: block;
	margin-bottom: .5rem;
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--tribo-accent);
}

.tribo-pillar p {
	margin: 0;
	color: var(--tribo-muted);
}

.tribo-steps {
	margin: 0;
	padding-left: 1.5rem;
	display: grid;
	gap: 1.1rem;
}

.tribo-steps li {
	padding-left: .35rem;
}

.tribo-steps strong {
	display: block;
	margin-bottom: .2rem;
}

.tribo-steps li {
	color: var(--tribo-muted);
}

.tribo-steps strong {
	color: var(--tribo-text);
}

/* ---------- paginas de texto e juridicas ---------- */

.tribo-page {
	padding-block: clamp(2rem, 6vw, 3.5rem);
}

.tribo-page h2 {
	margin: 2.25rem 0 .85rem;
	font-size: 1.35rem;
	line-height: 1.25;
}

.tribo-page h2:first-child {
	margin-top: 0;
}

.tribo-page p,
.tribo-page li {
	margin: 0 0 1rem;
}

.tribo-page ul {
	padding-left: 1.35rem;
}

.tribo-legal {
	max-width: 48rem;
	font-size: .96rem;
}

.tribo-legal__updated {
	color: var(--tribo-muted);
	font-size: .85rem;
}

/* Marcador de pendencia: visivel de proposito, para nao ir ao ar por engano. */
.tribo-legal__todo {
	margin: 1.5rem 0 2rem;
	padding: .85rem 1rem;
	border: 1px dashed var(--tribo-danger);
	border-radius: 8px;
	color: var(--tribo-danger);
	font-size: .9rem;
}

.tribo-legal__todo code {
	background: color-mix(in srgb, var(--tribo-danger) 12%, transparent);
	padding: .05em .35em;
	border-radius: 4px;
}

/* ---------- indice e subtitulos das paginas juridicas ----------
   O texto legal e longo e so tem h2 e h3. Sem um sumario no topo,
   quem procura "como apago meus dados" le a pagina inteira. */

.tribo-page h3 {
	margin: 1.75rem 0 .6rem;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--tribo-text);
}

.tribo-legal__indice {
	margin: 2rem 0 .5rem;
	padding: 1.1rem 1.25rem;
	background: var(--tribo-surface);
	border: 1px solid var(--tribo-line);
	border-radius: var(--tribo-radius);
}

.tribo-legal__indice-titulo {
	margin: 0 0 .55rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tribo-muted);
}

/* minmax(min(...)) e nao minmax(14rem): 14rem e piso absoluto e
   estoura a caixa num visor de 320px. */
.tribo-legal__indice ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: 0 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tribo-legal__indice li {
	margin: 0;
}

/* Prefixado com .tribo-legal: o tema sublinha todo link em
   .page-content, que empata em especificidade e carrega depois. */
.tribo-legal .tribo-legal__indice a {
	display: block;
	padding: .4rem 0;
	font-size: .92rem;
	color: var(--tribo-accent);
	text-decoration: none;
}

.tribo-legal .tribo-legal__indice a:hover,
.tribo-legal .tribo-legal__indice a:focus-visible {
	text-decoration: underline;
}

/* O cabecalho do topo cobriria o titulo ao pular pela ancora. */
.tribo-legal [id] {
	scroll-margin-top: 5.5rem;
}

/* ============================================================
   Os doze signos
   ------------------------------------------------------------
   O glifo e caractere Unicode, nao imagem: nitido em qualquer
   resolucao, colorivel por CSS e sem um byte de download. O
   widget equivalente do tema exigiria doze uploads manuais.

   A cor vem do elemento, nas variantes legiveis dos tokens: o
   ciano e o amarelo puros dos chakras nao alcancam contraste
   suficiente como texto sobre fundo claro.
   ============================================================ */

.tribo-signos {
	margin: 0 auto;
	max-width: 1100px;
	padding: 8px 0 4px;
	text-align: center;
}

.tribo-signos-titulo { margin: 0 0 10px; }

.tribo-signos-subtitulo {
	margin: 0 auto 30px;
	max-width: 620px;
	color: var(--tribo-muted);
}

.tribo-signos-grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tribo-signo {
	padding: 20px 12px 16px;
	border: 1px solid var(--tribo-line);
	border-radius: var(--tribo-radius);
	background: #FFFFFF;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tribo-signo:hover {
	transform: translateY(-3px);
	border-color: rgba(0, 74, 173, .28);
	box-shadow: 0 8px 24px rgba(20, 36, 61, .10);
}

.tribo-signo-glifo {
	/* Inter nao traz os signos, entao o navegador cai para fonte de
	   sistema. Sem esta pilha, alguns Android desenham o simbolo como
	   emoji colorido, que ignora a cor do elemento definida abaixo. O
	   seletor de variacao no HTML forca apresentacao de texto; a pilha
	   aqui cobre os casos em que ele nao basta. */
	font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "DejaVu Sans", serif;
	display: block;
	margin-bottom: 6px;
	font-size: 40px;
	line-height: 1;
}

.tribo-signo-nome { margin: 0 0 2px; font-size: 18px; }

.tribo-signo-periodo {
	margin: 0 0 2px;
	font-size: 13px;
	color: var(--tribo-muted);
}

.tribo-signo-meta {
	margin: 0;
	font-size: 12px;
	letter-spacing: .02em;
	color: var(--tribo-muted);
}

/* A cor do glifo diz o elemento sem precisar de legenda. */
.tribo-signo--fogo  .tribo-signo-glifo { color: var(--tribo-fogo); }
.tribo-signo--terra .tribo-signo-glifo { color: var(--tribo-terra); }
.tribo-signo--ar    .tribo-signo-glifo { color: var(--tribo-ar); }
.tribo-signo--agua  .tribo-signo-glifo { color: var(--tribo-agua); }

.tribo-signos-nota {
	margin: 22px auto 0;
	max-width: 640px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--tribo-muted);
}

@media (max-width: 480px) {
	.tribo-signos-grade { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.tribo-signo-glifo  { font-size: 34px; }
}

/* Quem prefere menos movimento nao recebe o deslocamento no hover. */
@media (prefers-reduced-motion: reduce) {
	.tribo-signo { transition: none; }
	.tribo-signo:hover { transform: none; }
}

/* ============================================================
   Ritmo do formulario de captura
   ------------------------------------------------------------
   Medicao em 28/08/2026: o formulario tinha 1028px e empurrava o
   botao de envio para 1153px no desktop (dobra de 900) e 1994px no
   celular. Numa pagina cujo unico trabalho e capturar contato, isso
   e o proprio funil vazando.

   Os cortes abaixo sao de espaco morto, nao de conteudo: nenhum
   campo saiu, nenhuma explicacao foi apagada.
   ============================================================ */

/* A explicacao do horario so interessa a quem marca a caixa. Visivel
   o tempo todo, ocupa 41px para responder pergunta que ninguem fez. */
.tribo-field--check:not(:has(input:checked)) .tribo-field__note {
	display: none;
}

/* Vaos entre blocos: 28px era generoso demais para um formulario que
   precisa caber na primeira tela. */
.tribo-form .tribo-fieldset {
	margin-bottom: 20px;
}

.tribo-form .tribo-advanced {
	margin-bottom: 18px;
}

/* O cartao ja tem titulo, e a secao ao redor ja explica o produto. O
   paragrafo interno repetia os dois. Fica menor e mais curto. */
.tribo-form__lead {
	margin-bottom: 18px;
	font-size: .95rem;
	line-height: 1.5;
}

/* O botao e a acao principal da pagina inteira: merece mais presenca
   que os 44px que tinha. */
.tribo-form .tribo-button {
	min-height: 52px;
	font-size: 1.05rem;
}

/* ============================================================
   Formulario em duas etapas
   ------------------------------------------------------------
   Nove campos de uma vez pesam antes de qualquer compromisso: a
   pessoa ve o pedido de telefone antes de ter investido nada. Em
   duas etapas, o primeiro passo pede so o que ela veio dar.

   A divisao e apenas visual. Sem JavaScript o formulario aparece
   inteiro e funciona igual -- as regras abaixo so valem quando as
   classes existem, e quem as cria e o script.
   ============================================================ */

.tribo-etapa { display: none; }
.tribo-etapa--ativa { display: block; }

/* A trilha diz onde a pessoa esta e quanto falta. Sem isso, esconder
   campos parece defeito em vez de etapa. */
.tribo-trilha {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 22px;
}

.tribo-trilha__marca {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 10px;
	border-top: 2px solid var(--tribo-line);
	color: var(--tribo-muted);
	font-size: .8125rem;
	transition: color .18s ease, border-color .18s ease;
}

.tribo-trilha__marca--ativa {
	border-top-color: var(--tribo-accent);
	color: var(--tribo-text);
}

.tribo-trilha__n {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--tribo-line);
	color: var(--tribo-muted);
	font-size: .6875rem;
	font-weight: 700;
}

.tribo-trilha__marca--ativa .tribo-trilha__n {
	background: var(--tribo-accent);
	color: #FFFFFF;
}

.tribo-etapa__voltar {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 10px;
	border: 0;
	background: none;
	color: var(--tribo-muted);
	font-size: .875rem;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: .2em;
}

.tribo-etapa__voltar:hover { color: var(--tribo-accent); }

/* Quem prefere menos movimento nao recebe transicao na trilha. */
@media (prefers-reduced-motion: reduce) {
	.tribo-trilha__marca { transition: none; }
}

/* ==========================================================================
   BORDA DE CAMPO  --  04/09/2026
   --tribo-line serve a duas coisas diferentes: a borda de um cartao, que pode
   ser leve, e a borda de um campo de formulario, que nao pode. A WCAG 1.4.11
   pede 3:1 para o contorno que identifica um controle, e #dbe3f2 sobre branco
   da 1,29 -- o campo praticamente nao existe para quem enxerga pouco.
   Os campos ganham um token proprio; os cartoes continuam leves.
   ========================================================================== */

.tribo-field input[type="text"],
.tribo-field input[type="date"],
.tribo-field input[type="time"],
.tribo-field input[type="email"],
.tribo-field input[type="tel"],
.tribo-field input[type="number"],
.tribo-field select,
.tribo-field textarea {
	border-color: var(--tribo-campo-borda, #828EA0);
}

.tribo-field input[type="checkbox"],
.tribo-field input[type="radio"] {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--tribo-accent);
}

/* O rotulo inteiro vira alvo de toque: a caixa sozinha tem 20px, e a
   recomendacao para o dedo e 44. */
.tribo-field--check label {
	display: inline-flex;
	gap: .55rem;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
}


/* ============================================================
   Aviso de cookies
   ------------------------------------------------------------
   Mora no canto inferior esquerdo porque e de la que ele encolhe
   para o icone: a peca some e a outra nasce no mesmo lugar.

   As duas pecas nascem com o atributo hidden e o JS decide qual
   mostrar. Por isso cada uma repete a regra [hidden] -- uma
   classe do autor com display vence o [hidden] do navegador, e
   sem esta linha as duas apareceriam juntas.
   ============================================================ */

.tribo-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.tribo-cookies__aviso {
	position: fixed;
	z-index: 40;
	left: 1rem;
	bottom: 1rem;
	display: block;
	width: min(24rem, calc(100vw - 2rem));
	padding: 1.05rem 1.15rem 1.15rem;
	background: var(--tribo-bg);
	border: 1px solid var(--tribo-line);
	border-radius: var(--tribo-radius);
	box-shadow: 0 18px 48px rgba(9, 24, 46, .18);
	animation: tribo-cookies-sobe .22s ease-out;
}

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

@keyframes tribo-cookies-sobe {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.tribo-cookies__titulo {
	margin: 0 0 .35rem;
	font-size: .95rem;
	font-weight: 700;
	color: var(--tribo-text);
}

.tribo-cookies__texto {
	margin: 0 0 .9rem;
	font-size: .85rem;
	line-height: 1.5;
	color: var(--tribo-muted);
}

.tribo-cookies__texto a {
	color: var(--tribo-accent);
}

.tribo-cookies__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

/* Dois seletores de classe: o .tribo-btn do tema tem 50px de altura,
   que e alto demais dentro de uma caixa deste tamanho. */
.tribo-cookies__acoes .tribo-btn {
	flex: 1 1 7rem;
	min-height: 42px;
	padding: .55rem 1.1rem;
	font-size: .88rem;
}

/* Dois seletores de classe de proposito: o reset.css do tema estiliza
   [type="button"], que empata em especificidade com uma classe unica e
   carrega depois -- o icone saia com 55px de largura e borda rosa. */
.tribo-cookies .tribo-cookies__icone {
	position: fixed;
	z-index: 40;
	left: 1rem;
	bottom: 1rem;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--tribo-bg);
	border: 1px solid var(--tribo-line);
	border-radius: 50%;
	color: var(--tribo-accent);
	box-shadow: 0 10px 26px rgba(9, 24, 46, .16);
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease;
}

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

.tribo-cookies .tribo-cookies__icone svg {
	width: 22px;
	height: 22px;
}

.tribo-cookies .tribo-cookies__icone:hover,
.tribo-cookies .tribo-cookies__icone:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(9, 24, 46, .22);
}

/* Com o painel do menu aberto a tela e do menu. O aviso volta ao fechar. */
html.tribo-sem-rolagem .tribo-cookies__aviso,
html.tribo-sem-rolagem .tribo-cookies__icone {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.tribo-cookies__aviso {
		animation: none;
	}

	.tribo-cookies .tribo-cookies__icone {
		transition: none;
	}

	.tribo-cookies .tribo-cookies__icone:hover,
	.tribo-cookies .tribo-cookies__icone:focus-visible {
		transform: none;
	}
}


/* ============================================================
   Formulario de novidades: campo isca e recado de volta
   ------------------------------------------------------------
   `display: none` e proposital no campo isca. Posicionar fora da
   tela e mais dificil de o robo detectar, mas o preenchimento
   automatico do navegador alcanca campo fora da tela -- e ai
   quem seria bloqueado e a pessoa de verdade. Falso positivo
   aqui custa um inscrito; falso negativo custa uma linha de
   spam na tabela.
   ============================================================ */

.tribo-isca {
	display: none;
}

.tribo-rodape__recado {
	margin: .6rem 0 0;
	padding: .55rem .75rem;
	border-radius: 8px;
	border-left: 3px solid currentColor;
	font-size: .85rem;
	line-height: 1.45;
}

/* Cores escuras: este rodape e claro. As claras vieram de um rodape
   escuro que este projeto nao tem, e o recado saiu verde sobre verde. */
.tribo-rodape__recado--certo {
	background: rgba(1, 137, 58, .10);
	color: #0f6b34;
}

.tribo-rodape__recado--erro {
	background: rgba(179, 56, 43, .10);
	color: #97281c;
}

/* Dois seletores: `.tribo-rodape a` do tema fixa 15px e empata com um
   seletor de classe unico -- a nota tem 11px e o link saia maior que
   a frase em volta dele. */
.tribo-rodape .tribo-rodape__novidades-nota a {
	font-size: inherit;
	line-height: inherit;
}


/* ============================================================
   Cadastro e horoscopo pessoal
   ------------------------------------------------------------
   A tela de cadastro reaproveita .tribo-field e .tribo-fieldset
   do formulario do mapa: sao os mesmos campos, e dois desenhos
   diferentes para o mesmo pedido confundiriam quem ja preencheu
   um deles.
   ============================================================ */

.tribo-cadastro {
	max-width: 44rem;
}

.tribo-fieldset__lead {
	margin: 0 0 1.1rem;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--tribo-muted);
}

.tribo-cadastro__entrar {
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--tribo-line);
}

.tribo-cadastro__entrar h2 {
	margin: 0 0 1rem;
	font-size: 1.15rem;
}

.tribo-cadastro__login {
	max-width: 26rem;
}

/* ---------- a leitura ---------- */

.tribo-pessoal {
	max-width: 44rem;
}

.tribo-pessoal__topo {
	margin-bottom: 1.75rem;
}

.tribo-pessoal__selo {
	margin: 0 0 .4rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tribo-accent);
}

.tribo-pessoal__topo h2 {
	margin: 0 0 .35rem;
	font-size: clamp(1.4rem, 4vw, 1.9rem);
	line-height: 1.15;
}

.tribo-pessoal__data {
	margin: 0;
	font-size: .9rem;
	color: var(--tribo-muted);
}

/* Um cartao por contato. A borda a esquerda separa sem fechar
   a caixa: sao blocos de uma leitura continua, nao itens soltos. */
.tribo-pessoal__bloco {
	margin: 0 0 1.5rem;
	padding-left: 1rem;
	border-left: 3px solid var(--tribo-line);
}

/* Dois seletores de classe: `.tribo-page h3` (escrito para as paginas
   juridicas) tem especificidade 0,1,1 e venceria uma classe sozinha --
   a tarja saia com 1,05rem em serifa, competindo com o titulo abaixo. */
.tribo-pessoal .tribo-pessoal__cabeca {
	margin: 0 0 .25rem;
	font-family: var(--fonte-texto, inherit);
	font-size: .74rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tribo-accent);
}

.tribo-pessoal__titulo {
	margin: 0 0 .5rem;
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--tribo-text);
}

.tribo-pessoal__bloco p {
	margin: 0 0 .7rem;
	line-height: 1.6;
}

.tribo-pessoal__casa {
	font-size: .85rem;
	color: var(--tribo-muted);
}

.tribo-pessoal__aviso,
.tribo-pessoal__nota {
	margin-top: 1.5rem;
	padding: .8rem 1rem;
	border-radius: var(--tribo-radius);
	background: var(--tribo-surface);
	font-size: .85rem;
	line-height: 1.55;
	color: var(--tribo-muted);
}

/* ---------- as portas ---------- */

.tribo-pessoal__porta {
	max-width: 40rem;
}

.tribo-pessoal__porta h2 {
	margin: 0 0 .75rem;
	font-size: clamp(1.35rem, 4vw, 1.75rem);
	line-height: 1.2;
}

.tribo-pessoal__lista {
	margin: 1.1rem 0 1.5rem;
	padding-left: 1.15rem;
}

.tribo-pessoal__lista li {
	margin-bottom: .4rem;
	line-height: 1.55;
}

.tribo-pessoal__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: .65rem;
	margin: 0 0 1rem;
}

@media (max-width: 30rem) {
	.tribo-pessoal__acoes .tribo-btn {
		width: 100%;
		justify-content: center;
	}
}

/* Convite para o horoscopo pessoal, no fim do indice dos signos. */
.tribo-horo__convite {
	margin: 2rem 0 0;
	padding: 1.4rem 1.5rem;
	background: var(--tribo-surface);
	border: 1px solid var(--tribo-line);
	border-radius: var(--tribo-radius);
}

.tribo-horo__convite-selo {
	margin: 0 0 .35rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tribo-accent);
}

.tribo-horo__convite h2 {
	margin: 0 0 .6rem;
	font-size: 1.25rem;
	line-height: 1.25;
}

.tribo-horo__convite p {
	margin: 0 0 1.1rem;
	line-height: 1.6;
	color: var(--tribo-muted);
}

@media (max-width: 30rem) {
	.tribo-horo__convite .tribo-btn {
		width: 100%;
		justify-content: center;
	}
}

/* Botao dentro de pagina de conteudo nao e link de texto.
   O tema tem `.page-content a { text-decoration: underline }` (0,1,1), que
   vence `.tribo-btn` (0,1,0) por um ponto -- todo botao de shortcode saia
   sublinhado. Duas classes desempatam. */
.page-content .tribo-btn,
.tribo-page .tribo-btn {
	text-decoration: none;
}


/* ============================================================
   O baralho do taro
   ------------------------------------------------------------
   Cartas sobrepostas numa faixa que rola, que e como um baralho
   aberto sobre a mesa. Grade de 78 quadradinhos leria como
   inventario; o taro precisa parecer baralho.

   O verso e desenhado em CSS, sem imagem: nenhum byte para
   baixar, nitido em qualquer tela, e nosso.
   ============================================================ */

.tribo-taro-passos {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	counter-reset: tribo-passo;
}

.tribo-taro-passo {
	margin: 0 0 1.75rem;
	padding-left: 2.6rem;
	position: relative;
	counter-increment: tribo-passo;
}

.tribo-taro-passo::before {
	content: counter(tribo-passo);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--tribo-accent);
	color: #fff;
	font-size: .85rem;
	font-weight: 700;
}

.tribo-taro-passo h3 {
	margin: 0 0 .6rem;
	font-size: 1.05rem;
	line-height: 1.3;
}

.tribo-taro-passo__dica {
	margin: 0 0 .7rem;
	font-size: .88rem;
	color: var(--tribo-muted);
}

.tribo-taro-opcao__quantas {
	display: block;
	margin-top: .15rem;
	font-size: .78rem;
	font-style: normal;
	color: var(--tribo-muted);
}

/* ---------- o baralho aberto ----------
   Cartas sobrepostas nos DOIS eixos, preenchendo um retangulo, e nao uma
   faixa que rola. E como um baralho aberto sobre a mesa: da para ver o
   monte inteiro sem arrastar nada, que e o ponto de escolher a carta.

   O passo horizontal e a largura menos a margem negativa; o vertical, a
   altura menos a dela. O `padding-top` da caixa compensa a margem negativa
   da primeira fileira, que senao subiria para fora. */

.tribo-baralho {
	padding: 74px .25rem 1.2rem;
	line-height: 0;
	text-align: center;
}

.tribo-baralho .tribo-baralho__carta {
	display: inline-block;
	width: 64px;
	height: 118px;
	margin: -74px -40px 0 0;
	padding: 0;
	vertical-align: top;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 6px;
	cursor: pointer;
	transition: transform .16s ease;
	position: relative;

	background-color: var(--tribo-accent);
	background-image:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 7px),
		repeating-linear-gradient(-45deg, rgba(255, 255, 255, .10) 0 2px, transparent 2px 7px);

	/* A sombra a esquerda e o que faz carta sobreposta parecer carta: sem
	   ela as 78 viram um retangulo azul listrado. */
	box-shadow:
		-3px 0 6px rgba(9, 24, 46, .30),
		inset 0 0 0 2px rgba(255, 255, 255, .22);
}

.tribo-baralho .tribo-baralho__carta:hover,
.tribo-baralho .tribo-baralho__carta:focus-visible {
	transform: translateY(-12px);
	z-index: 2;
}

.tribo-baralho .tribo-baralho__carta.is-escolhida {
	transform: translateY(-20px);
	border-color: var(--tribo-sacral, #ff9822);
	box-shadow:
		0 12px 24px rgba(9, 24, 46, .34),
		inset 0 0 0 2px var(--tribo-sacral, #ff9822);
	z-index: 3;
}

.tribo-baralho .tribo-baralho__carta:disabled {
	cursor: default;
	opacity: .4;
}

/* Embaralhar: um tremor curto, so para a pessoa ver que mexeu. */
.tribo-baralho--embaralhando .tribo-baralho__carta {
	animation: tribo-baralho-treme .7s ease;
}

@keyframes tribo-baralho-treme {
	0%   { transform: translateY(0) rotate(0deg); }
	30%  { transform: translateY(-7px) rotate(-3deg); }
	60%  { transform: translateY(5px) rotate(2deg); }
	100% { transform: translateY(0) rotate(0deg); }
}

/* A virada, na tela do resultado: a carta chega de costas e vira. */
@keyframes tribo-carta-vira {
	from { transform: rotateY(180deg); opacity: .2; }
	to   { transform: rotateY(0deg); opacity: 1; }
}

.tribo-taro__cartas > * {
	animation: tribo-carta-vira .7s cubic-bezier(.2, .7, .3, 1) backwards;
}

.tribo-taro__cartas > *:nth-child(2) { animation-delay: .18s; }
.tribo-taro__cartas > *:nth-child(3) { animation-delay: .36s; }
.tribo-taro__cartas > *:nth-child(4) { animation-delay: .54s; }
.tribo-taro__cartas > *:nth-child(5) { animation-delay: .72s; }
.tribo-taro__cartas > *:nth-child(n+6) { animation-delay: .9s; }

@media (prefers-reduced-motion: reduce) {
	.tribo-baralho--embaralhando .tribo-baralho__carta,
	.tribo-taro__cartas > * {
		animation: none;
	}

	.tribo-baralho .tribo-baralho__carta {
		transition: none;
	}
}

@media (max-width: 40rem) {
	.tribo-baralho {
		padding-top: 62px;
	}

	.tribo-baralho .tribo-baralho__carta {
		width: 54px;
		height: 100px;
		margin: -62px -33px 0 0;
	}
}

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

.tribo-taro-form .tribo-taro-form__refazer {
	margin-left: .75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tribo-accent);
	font-size: .88rem;
	text-decoration: underline;
	cursor: pointer;
}


/* ============================================================
   Envio de vibracao
   ------------------------------------------------------------
   Uma pagina de formulario, e so. O que ela tem de proprio e a
   contagem: sem ela, a pessoa manda um nome para o vazio e nao
   ve sinal nenhum de que existe um envio do outro lado.

   A contagem e o unico numero da tela, entao ela pode ser
   grande. Nada mais aqui compete com o formulario.
   ============================================================ */

.tribo-vibracao {
	max-width: 40rem;
	margin: 0 auto;
}

.tribo-vibracao__contagem {
	margin: 1rem 0 0;
	padding: .7rem 1rem;
	border-radius: 12px;
	background: var(--tribo-surface);
	color: var(--tribo-text);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}

.tribo-vibracao__form {
	margin-top: 1.75rem;
}

/* Dois seletores de classe: `.tribo-field label` empata com um
   seletor unico e o rotulo "opcional" saia com o peso do label. */
.tribo-vibracao .tribo-field__opcional {
	margin-left: .35rem;
	color: var(--tribo-muted);
	font-size: .8rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.tribo-vibracao__form .tribo-form__nota {
	margin: 1.1rem 0 0;
	color: var(--tribo-muted);
	font-size: .82rem;
	line-height: 1.55;
}

.tribo-vibracao__recado {
	margin: 1.25rem 0 0;
	padding: .7rem 1rem;
	border-radius: 10px;
	border-left: 3px solid currentColor;
	font-size: .92rem;
	line-height: 1.5;
}

.tribo-vibracao__recado--certo {
	background: rgba(1, 137, 58, .10);
	color: #0f6b34;
}

.tribo-vibracao__recado--erro {
	background: rgba(179, 56, 43, .10);
	color: #97281c;
}

.tribo-vibracao__nota {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--tribo-line);
	color: var(--tribo-muted);
	font-size: .92rem;
	line-height: 1.6;
}

.tribo-vibracao__nota h2 {
	margin: 0 0 .6rem;
	color: var(--tribo-text);
	font-size: 1.05rem;
}

.tribo-vibracao__nota p {
	margin: 0 0 .6rem;
}