/**
 * FAQ — acordeão de perguntas/respostas.
 */
.faq {
	padding: var(--spacing-xl) 0;
}

.faq__eyebrow {
	display: block;
	color: var(--cor-destaque-secundaria);
	font-size: var(--fs-3, 1.125rem);
	margin-bottom: var(--spacing-xs);
}

.faq__title {
	color: var(--cor-branco);
	font-size: var(--fs-2, 2rem);
	margin-bottom: var(--spacing-lg);
}

.faq__list {
	display: flex;
	flex-direction: column;
}

.faq__item {
	padding: 0 2rem 1.25rem;
}

.faq__item.is-open {
	background-color: var(--cor-secundaria);
}

.faq__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md);
	color: var(--cor-branco);
	font-size: var(--fs-4, 1.125rem);
	text-align: left;
	padding: 1.25rem 0 1.25rem;
	border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.faq__item.is-open .faq__question {
	border-color: transparent;
	padding-bottom: 0;
}

.faq__icon svg {
	position: relative;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	transition: all .4s;
}

.faq__item.is-open .faq__icon svg {
	transform: rotate(180deg);
	opacity: 1;
}

.faq__answer {
	display: none;
}

.faq__item.is-open .faq__answer {
	display: block;
}

.faq__answer p {
	color: var(--cor-branco);
	max-width: calc(100% - 30px);
	margin-bottom: 0;
}

.faq__question-input,
.faq__answer-input {
	width: 100%;
	background: rgba(255, 255, 255, .08);
	border: 1px dashed rgba(255, 255, 255, .4);
	color: var(--cor-branco);
	font: inherit;
	padding: 6px 8px;
	margin-bottom: 8px;
}

.faq__answer-input {
	min-height: 60px;
}

@media (max-width: 767px) {
	.faq__item {
		padding: 0 1.25rem 1rem;
	}
}