/* Features: página principal (archive-cpt_features.php) e single
   (single-cpt_features.php). Mesma paleta do tema (fundo #001317, verde
   #2EFF00, cinza #7C898C, bordas #14363E). */

/* Single: sem margin-top nos títulos (o espaçamento vem das seções). */
.features-single h1,
.features-single h2,
.features-single h3 {
	margin-top: 0;
}

/* ------------------------------------------------------------ hero */
.features-hero {
	padding: 48px 0 32px;
	text-align: center;
}
.features-hero h1 {
	margin-bottom: 16px;
}
.features-hero p {
	font-size: 1.125rem;
	color: #dddddd;
	margin-bottom: 24px;
}
.features-hero .ctas-download {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* página principal: texto à esquerda, mockup à direita */
.features-hero-split {
	text-align: left;
	padding: 24px 0 0;
}
/* mockup encostado na base da seção (texto continua centralizado) */
.features-hero-split .features-hero-img-cell {
	align-self: flex-end;
}
.features-hero-split h1 {
	font-size: 3.5rem;
	line-height: 1.1;
	margin-bottom: 24px;
}
.features-hero-split p {
	font-size: 1.0625rem;
	line-height: 1.6;
	margin-bottom: 33px !important;
}
.features-hero-split p b {
	color: #ffffff;
}
.features-hero-split p i {
	color: #7C898C;
}
.features-hero-img img {
	display: block;
	width: 100%;
	max-width: 560px;
	height: auto;
	margin-left: auto;
}
@media (max-width: 639px) {
	.features-hero-split h1 { font-size: 2.5rem; }
	.features-hero-img img { margin: 24px auto 0; }
}

/* single: texto + print vertical do app */
.features-single-hero {
	padding: 24px 0 48px;
}
.features-eyebrow {
	display: inline-block;
	font-size: 1.5rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #2EFF00;
	margin-bottom: 12px;
}
.features-single-hero .ctas-download {
	justify-content: flex-start;
	margin-bottom: 20px;
	/* Mesma altura antes e depois do JS do rodapé trocar o .ctaPlaceholder
	   (69px, inc/ctas.php) pelos botões: sem isso a imagem do hero pulava
	   16px no mobile (CLS). */
	min-height: 69px;
}
.features-single-hero .ctas-download .button {
	margin-bottom: 0;
}
.features-rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: .9375rem;
	color: #dddddd;
}
.features-rating img {
	display: block;
	flex: none;
}
.features-single-hero-img img {
	display: block;
	width: 100%;
	max-width: 260px;
	height: auto;
	margin: 0 auto;
}
@media (max-width: 639px) {
	.features-single-hero-img img { margin-top: 32px; }
}


/* ------------------------------------------------------ categorias */
.features-archive .features-categories {
	background: linear-gradient(90deg, rgba(0, 19, 23, 0) 0%, rgba(0, 37, 46, 1) 100%) !important;
	border-top: 1px solid #0f272d;
	border-bottom: 1px solid #0f272d;
}
.features-categories-title {
	margin-top: 0;
	font-size: 2.25rem;
	margin-bottom: 40px;
}
.features-categories-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 40px;
}
@media (max-width: 1023px) {
	.features-categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
	.features-categories-title { font-size: 1.75rem; margin-bottom: 28px; }
	.features-categories-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
.features-category h3 {
	font-size: 1.375rem;
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid #14363E;
}
.features-list {
	list-style: none;
	margin: 0;
}
.features-list li + li {
	margin-top: 2px;
}
.features-list a {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 6px 0;
	color: #dddddd;
	font-size: 1rem;
	line-height: 1.4;
	transition: color .15s ease;
}
.features-list a svg {
	flex: none;
	margin-top: 5px;
	color: #2EFF00;
}
.features-list a:hover,
.features-list a:focus {
	color: #2EFF00;
}

/* ------------------------------------------- cards (single: relacionadas) */
.features-category-header {
	margin-bottom: 24px;
}
.features-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
@media (max-width: 1023px) {
	.features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
	.features-grid { grid-template-columns: minmax(0, 1fr); }
}
.features-grid-item {
	display: flex;
}
.features-grid-item[hidden] {
	display: none;
}
.features-grid-item > .feature-card {
	flex: 1;
}
/* "Explore more features": mesmo tamanho dos títulos de reviews/FAQ
   (.titles h2), centralizado */
.features-related .features-category-header {
	margin-bottom: 30px;
	text-align: center;
}
.features-related .features-category-header h2 {
	font-size: 32px;
	line-height: 40px;
	font-weight: 500;
	margin-bottom: 0;
}
.features-related-more {
	margin-top: 32px;
}
.features-related-more .button {
	display: inline-flex;
	margin: 0;
}
.feature-card {
	padding: 20px;
	display: flex;
	flex-direction: column;
	border: 1px solid #14363E;
	border-radius: 14px;
	overflow: hidden;
	color: #ffffff;
	background: #00252E;
	transition: border-color .2s ease;
}
.feature-card:hover {
	border-color: #2EFF00;
	color: #ffffff;
}
.feature-card-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.feature-card-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: 1;
}
.feature-card-text {
	min-width: 0;
}
.feature-card-content h3 {
	font-size: 1.1rem;
	line-height: 1.3;
	margin-bottom: 0;
}
/* card com cara de botão: só título + seta (resumo continua no HTML) */
.feature-card-content p {
	display: none;
}
.feature-card-arrow {
	flex: none;
	color: #fff;
	opacity: .4;
	transition: transform .2s ease;
	width: 13px;
	height: auto;
}
.feature-card:hover .feature-card-arrow,
.feature-card:focus .feature-card-arrow {
	transform: translateX(4px);
}

/* ------------------------------------- destaques "Discover Befit" (single) */
.custom-triple-affiliates h3 {
	margin-top: 10px !important;
}
/* mesmo tamanho dos títulos de reviews/FAQ (.titles h2), em vez dos 48px de
   .titles-affiliates h2 usados na LP de afiliados */
.features-highlights .titles-affiliates h2 {
	font-size: 32px;
	line-height: 40px;
}
.features-highlights .titles-affiliates {
	margin-bottom: 40px;
}
.features-highlights-ctas {
	justify-content: center;
	margin-top: 48px;
}

/* ------------------------------------------------------ reviews (single) */
.features-single #reviews {
	background: linear-gradient(90deg, rgba(0, 19, 23, 0) 0%, rgba(0, 37, 46, 1) 100%) !important;
	border-top: 1px solid #0f272d;
	border-bottom: 1px solid #0f272d;
}

/* ---------------------------------------------------------- FAQ (single) */
/* .press-section (inc/faq.php) traz margin-top de 40/80px do style-common;
   mesma correção de .about-faq (page-about.php). */
.features-faq .press-section {
	margin: 0;
}
.features-faq .titles {
	margin-bottom: 30px;
}

/* --------------------------------------------- conteúdo editável (single) */
.features-content {
	background: linear-gradient(90deg, rgba(0, 19, 23, 0) 0%, rgba(0, 37, 46, 1) 100%) !important;
	border-top: 1px solid #0f272d;
	border-bottom: 1px solid #0f272d;
}
.features-content-body img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}