/* =========================================================
   Pagina da Barbara Mariah (page-barbaramariah.php)
   So o que o theme.css nao tem: o resto sao as secoes da home.
   Carregado apenas nessa pagina (inc/enqueue.php).
   ========================================================= */

.perfil-intro { padding-top: clamp(1.5rem, 4vw, 3rem); }

/* Texto ocupa mais que a foto: retrato vertical numa coluna de 50% ficava
   com quase 800px de altura. */
.perfil-intro .duas-colunas { grid-template-columns: 1.15fr .85fr; }
.perfil-trajetoria .duas-colunas { grid-template-columns: .85fr 1.15fr; }

.perfil__subtitulo {
	font-family: var(--fonte-titulo);
	font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem);
	line-height: 1.45;
	color: var(--cor-ouro);
	max-width: 42ch;
	margin: 1.75rem 0 0;
}

.perfil__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1rem;
	margin-top: 2.25rem;
}

.perfil__retrato {
	justify-self: center;
	width: 100%;
	max-width: 380px;
}

.perfil__texto { max-width: 62ch; margin-top: 1.75rem; }
.secao__cabecalho + .perfil__texto { margin-top: 0; }

.perfil__centro {
	max-width: var(--largura-estreita);
	margin-inline: auto;
}

/* Estudos: selos pequenos, como os chips do catalogo */
.perfil__estudos {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.perfil__estudos li {
	font-size: .8125rem;
	letter-spacing: .06em;
	color: var(--cor-ouro-claro);
	border: 1px solid var(--cor-linha);
	border-radius: 999px;
	padding: .3rem .95rem;
}

.perfil__citacao {
	margin: 2.75rem 0 0;
	padding: 1.75rem 0 0;
	border-top: 1px solid var(--cor-linha);
	font-family: var(--fonte-titulo);
	font-style: italic;
	font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
	line-height: 1.5;
	color: var(--cor-ouro-claro);
	text-align: center;
}

/* Pilares da etica: cartao curto, so titulo */
.perfil__pilares { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.perfil__pilar {
	align-items: center;
	text-align: center;
	padding: 1.75rem 1.25rem;
}
.perfil__pilar-icone {
	display: block;
	color: var(--cor-ouro);
	font-size: 1.125rem;
	margin-bottom: .625rem;
}

/* Formatos de consulta */
.perfil__formato-etiqueta {
	align-self: flex-start;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cor-ouro);
	border: 1px solid var(--cor-linha);
	border-radius: 999px;
	padding: .2rem .8rem;
	margin-bottom: 1.25rem;
}

.perfil__formato-subtitulo {
	color: var(--cor-ouro);
	font-size: 1rem;
	margin: .75rem 0 0;
}

.perfil__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 1rem;
	color: #BFC2CE;
}
.perfil__lista li {
	position: relative;
	padding-left: 1.5rem;
}
.perfil__lista li + li { margin-top: .75rem; }
.perfil__lista li::before {
	content: "✦";
	position: absolute;
	left: 0;
	top: .1em;
	font-size: .8125rem;
	color: var(--cor-ouro);
}

.perfil__preco {
	font-family: var(--fonte-titulo);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--cor-ouro-claro);
	text-align: right;
	line-height: 1.2;
}
.perfil__preco small {
	display: block;
	font-family: var(--fonte-corpo);
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cor-texto-suave);
}

.perfil__nota {
	max-width: 62ch;
	margin: 2.5rem auto 0;
	text-align: center;
	font-size: .9375rem;
	color: var(--cor-texto-suave);
}

@media (max-width: 900px) {
	.perfil-intro .duas-colunas,
	.perfil-trajetoria .duas-colunas { grid-template-columns: 1fr; }
	/* No celular a foto da trajetoria vem depois do texto, como no Sobre da home. */
	.perfil-trajetoria .perfil__retrato { order: 2; }
	.perfil__retrato { max-width: 340px; }
}