/**
 * Home — abertura, benefícios e informações.
 *
 * Blocos, carrosséis e categorias estão em vitrine.css, porque a página de
 * produto também usa. Aqui fica só o que é exclusivo da home.
 *
 * Este arquivo foi reescrito do zero quando a home deixou de ser conteúdo de
 * blocos e virou template (front-page.php). As regras antigas — .jf-hero,
 * .jf-steps, .jf-trust, .jf-delivery — estilizavam seções que não existem mais.
 */

.jf-home {
	padding-top: 0;
}

/* O Storefront dá margem generosa ao topo do conteúdo; na home o banner é o
   primeiro elemento e precisa encostar mais no cabeçalho, como na referência. */
.home .site-content {
	padding-top: var(--jf-space-md);
}

.home .site-main {
	margin-bottom: 0;
}

/* O banner fica dentro do container, com cantos arredondados, como na
   referência — não mais de ponta a ponta da tela. */
.jf-home .jf-banners {
	margin: 0 0 var(--jf-space-xl);
}

/* ---------- Abertura ---------- */

.jf-abertura {
	margin: 0 0 var(--jf-space-lg);
}

.jf-abertura__titulo {
	max-width: 22ch;
	margin: 0 0 var(--jf-space-md);
	font-size: var(--jf-size-3xl);
	line-height: var(--jf-leading-tight);
	letter-spacing: var(--jf-tracking-tight);
}

.jf-abertura .jf-busca {
	max-width: 36rem;
}

/* ---------- Benefícios ---------- */

.jf-beneficios {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	margin: 0 0 var(--jf-space-2xl);
	padding: 0;
	list-style: none;
	background-color: var(--jf-color-surface);
	border: 1px solid var(--jf-color-border);
	border-radius: var(--jf-radius-md);
	overflow: hidden;
}

.jf-beneficios li {
	display: flex;
	align-items: center;
	gap: var(--jf-space-2xs);
	max-width: none;
	margin: 0;
	padding: var(--jf-space-sm) var(--jf-space-md);
	color: var(--jf-color-text);
	font-size: var(--jf-size-sm);
	line-height: var(--jf-leading-snug);
	border-left: 1px solid var(--jf-color-border);
}

.jf-beneficios li:first-child {
	border-left: 0;
}

.jf-beneficios svg {
	flex: 0 0 auto;
	color: var(--jf-color-primary);
}

.jf-beneficios a {
	color: var(--jf-color-text);
	font-weight: var(--jf-weight-semibold);
	text-decoration: none;
}

.jf-beneficios a:hover {
	color: var(--jf-color-primary);
}

/* Quando a grade quebra, a régua vertical não separa mais nada: vira
   horizontal. */
@media (max-width: 61.9375em) {
	.jf-beneficios li {
		border-left: 0;
		border-top: 1px solid var(--jf-color-border);
	}

	.jf-beneficios li:first-child {
		border-top: 0;
	}
}

/* ---------- Informações ---------- */

.jf-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--jf-color-surface);
	border: 1px solid var(--jf-color-border);
	border-radius: var(--jf-radius-md);
	overflow: hidden;
}

.jf-info__item {
	display: flex;
	flex-direction: column;
	gap: var(--jf-space-3xs);
	max-width: none;
	margin: 0;
	padding: var(--jf-pad-md);
	border-left: 1px solid var(--jf-color-border);
	font-size: var(--jf-size-sm);
	line-height: var(--jf-leading-snug);
}

.jf-info__item:first-child {
	border-left: 0;
}

.jf-info__item svg {
	margin-bottom: var(--jf-space-2xs);
	color: var(--jf-color-primary);
}

.jf-info__item strong {
	color: var(--jf-color-text);
}

.jf-info__item span,
.jf-info__item a {
	color: var(--jf-color-text-muted);
}

.jf-info__item a {
	text-decoration: none;
}

@media (max-width: 47.9375em) {
	.jf-info__item {
		border-left: 0;
		border-top: 1px solid var(--jf-color-border);
	}

	.jf-info__item:first-child {
		border-top: 0;
	}
}

/* ---------- Faixas ----------
 *
 * Cada seção da home ganha um fundo de ponta a ponta, alternando tons da
 * paleta, para que a troca de assunto se veja sem ler o título. Os tons são
 * todos da paleta, e os pares de texto foram medidos sobre cada um — o pior é
 * o texto apagado sobre papel, 4,69:1; a borda de controle fica em 3,10:1 no
 * pior caso.
 *
 * A seção continua dentro do container (o conteúdo não muda de largura); só
 * o fundo vaza até a borda da tela. `box-shadow` de 100vmax pinta os lados e
 * o `clip-path` corta em cima e embaixo — sem elemento extra, sem mexer no
 * layout e sem rolagem horizontal, porque sombra não conta para o scroll.
 *
 * Sem textura nas faixas: a regra 3 das texturas proíbe atrás de texto, e
 * aqui há nome e preço de coroa em todas.
 */

.jf-bloco.jf-tom {
	/* Qualificado com .jf-bloco: vitrine.css carrega depois deste arquivo e a
	   margem de bloco dele abria um vão bege entre uma faixa e outra. O nome
	   é `jf-tom`, e não `jf-faixa`: essa classe já é a faixa de atendimento
	   do topo do site. */
	margin: 0;
	padding: var(--jf-section-y) 0;
	/* O tom vem do modificador; o bege é só o valor de reserva. */
	background-color: var(--jf-tom-cor, var(--jf-color-bg));
	box-shadow: 0 0 0 100vmax var(--jf-tom-cor, var(--jf-color-bg));
	clip-path: inset(0 -100vmax);
}

.jf-tom--branco { --jf-tom-cor: var(--jf-color-surface); }
.jf-tom--bege   { --jf-tom-cor: var(--jf-color-bg); }
.jf-tom--azul   { --jf-tom-cor: var(--jf-color-primary-soft); }
.jf-tom--rose   { --jf-tom-cor: var(--jf-color-accent-soft); }
.jf-tom--papel  { --jf-tom-cor: var(--jf-color-surface-alt); }

/* Sobre branco, o fundo das fotos (também branco) sumia na borda do card. */
.jf-tom--branco .jf-mini__foto,
.jf-tom--branco .jf-promo__foto {
	background-color: var(--jf-color-bg);
}

/* A seta e as pílulas são brancas: sobre a faixa branca, ganham o bege. */
.jf-tom--branco .jf-seta {
	background-color: var(--jf-color-bg);
}