/* Layout dos 10 blocos da Home (§5.1) — carregado só na página inicial
   (is_front_page()). Componentes reaproveitados (botões, cards de
   pacote/app/produto, accordion, CTA Skeelo/WhatsApp, hub-hero) já vêm
   de components/*.css, carregados globalmente — aqui é só o que é
   exclusivo de cada bloco da Home. */

/* Respiro entre as seções (§7.1: "muito respiro") — antes só
   .boek-legalidade e .boek-cta-final-home tinham padding-block (as duas
   com fundo de cor, por isso ficavam óbvias); as outras 7 seções não
   tinham NENHUM espaçamento vertical próprio, só o que sobrava da
   margem de algum elemento interno — encostavam praticamente umas nas
   outras. Um valor fluido só, aplicado igual em todas, cria um ritmo
   vertical consistente decendo a página inteira. */
.boek-logos-parceiros,
.boek-vitrine-linhas,
.boek-destaque-tv,
.boek-destaque-leitura,
.boek-destaque-apps,
.boek-como-funciona,
.boek-faq-resumido,
.boek-valores {
	padding-block: clamp(2.75rem, 6vw, 4.5rem);
}

/* Título → conteúdo dentro de cada seção: título, subtítulo opcional,
   grid/lista e o link "ver todos" formam uma coluna com espaçamento
   uniforme via gap — em vez de cada seção precisar de uma margem
   avulsa diferente no último filho pra não ficar tudo colado. */
.boek-vitrine-linhas,
.boek-destaque-tv,
.boek-destaque-leitura,
.boek-destaque-apps,
.boek-como-funciona,
.boek-faq-resumido,
.boek-valores {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

/* 1. Hero (boek/hero-home) — imagem de fundo (posicionada atrás do
   conteúdo, nunca em fluxo normal — ver comentário em .boek-hero-home__imagem
   sobre o bug que isso causava), texto/botões sempre por cima, centralizados
   no mobile e alinhados à esquerda ≥900px (deixa a ilustração de
   dispositivos do lado direito da imagem visível, sem overlay em cima).
   Vídeo de fundo (quando ligado) usa o mesmo princípio.

   ELEMENTO DE ASSINATURA do site (o único lugar com esse tratamento —
   não repetir em outro componente): um corte diagonal rígido, não um
   blur/blob suave — remete a troca de canal/tela, não a gradiente
   genérico de landing page de SaaS. Só aparece quando NÃO há imagem de
   fundo (a imagem cobre a seção inteira quando existe). */
.boek-hero-home {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	min-height: clamp(480px, 70vh, 600px);
	background:
		linear-gradient(133deg, rgba(0, 109, 119, 0.14) 0%, rgba(42, 157, 143, 0.14) 44%, transparent 45%),
		linear-gradient(180deg, var(--boek-creme), var(--boek-white));
}

@media (min-width: 900px) {
	.boek-hero-home {
		min-height: clamp(560px, 80vh, 720px);
	}
}

/* Bug corrigido (Sprint 33): esta div era renderizada em fluxo normal de
   documento (um <div style="aspect-ratio:16/9"> comum), empurrando todo o
   H1/subtítulo/botões pra baixo dela — a imagem end virava "mais um bloco
   de conteúdo" em vez de fundo da seção. Agora é absolutamente
   posicionada, cobrindo a section inteira (mesmo princípio já usado em
   .boek-hero-home__video, que nunca teve esse problema). */
.boek-hero-home__imagem {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--boek-creme);
}

.boek-hero-home__imagem img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Overlay pra garantir contraste do texto sobre a foto — creme translúcido
   (mesmo tom de --boek-creme, não um cinza genérico) em vez de opaco liso,
   pra imagem continuar reconhecível atrás do texto. No mobile é uniforme
   (não tem espaço pra separar texto de ilustração); ≥900px vira um
   degradê esquerda→direita, forte só onde o texto fica (esquerda),
   sumindo antes de chegar na ilustração de dispositivos (direita). */
.boek-hero-home__imagem::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(254, 243, 226, 0.88);
}

@media (min-width: 900px) {
	.boek-hero-home__imagem::after {
		background: linear-gradient(
			90deg,
			rgba(254, 243, 226, 0.93) 0%,
			rgba(254, 243, 226, 0.8) 38%,
			rgba(254, 243, 226, 0.25) 58%,
			rgba(254, 243, 226, 0) 72%
		);
	}
}

.boek-hero-home__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.boek-hero-home__video + .boek-hero-home__conteudo,
.boek-hero-home__video ~ .boek-hero-home__conteudo {
	position: relative;
	z-index: 1;
	background: linear-gradient(180deg, rgba(15, 14, 26, 0.55), rgba(15, 14, 26, 0.55));
	color: var(--boek-white);
}

/* Mesmo problema do CTA final (ver comentário lá): o horário de
   atendimento do CTA de WhatsApp usa --boek-ink fixo — precisa virar
   claro quando o hero está com vídeo de fundo (overlay escuro). */
.boek-hero-home__video + .boek-hero-home__conteudo .boek-whatsapp-cta__horario,
.boek-hero-home__video ~ .boek-hero-home__conteudo .boek-whatsapp-cta__horario {
	color: var(--boek-white);
	opacity: 0.85;
}

.boek-hero-home__conteudo {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding-block: clamp(3rem, 7vw, 5.5rem);
	text-align: center;
}

/* ≥900px com imagem de fundo: texto alinhado à esquerda, largura
   contida — deixa a ilustração de dispositivos do lado direito da foto
   visível (o overlay em degradê de .boek-hero-home__imagem::after já some
   antes de chegar lá, ver acima). Sem imagem (fallback só com o corte
   diagonal), continua centralizado — não tem ilustração real pra
   preservar nesse caso. */
@media (min-width: 900px) {
	.boek-hero-home__imagem ~ .boek-hero-home__conteudo {
		align-items: flex-start;
		text-align: left;
		max-width: 55%;
		margin-inline: 0;
	}

	.boek-hero-home__imagem ~ .boek-hero-home__conteudo .boek-hero-home__ctas {
		justify-content: flex-start;
	}
}

.boek-hero-home__conteudo h1 {
	font-size: clamp(1.25rem, 3vw + 0.7rem, 3.5rem);
	max-width: 22ch;
}

.boek-hero-home__subtitulo {
	max-width: 60ch;
	font-size: clamp(0.9375rem, 1.5vw + 0.6rem, 1.125rem);
}

.boek-hero-home__ctas {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin-top: 0.5rem;
}

@media (min-width: 600px) {
	.boek-hero-home__ctas {
		flex-direction: row;
		justify-content: center;
	}
}

/* 2. Logos dos parceiros (boek/logos-parceiros) */
.boek-logos-parceiros {
	text-align: center;
}

.boek-logos-parceiros__titulo {
	font-weight: 600;
	color: var(--boek-turquesa-a11y);
	margin-bottom: 1rem;
}

.boek-logos-parceiros__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.boek-logos-parceiros__item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
	color: inherit;
}

.boek-logos-parceiros__logo {
	position: relative;
	display: block;
	width: 64px;
	border-radius: 0.5rem;
	overflow: hidden;
	background-color: var(--boek-creme);
}

.boek-logos-parceiros__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.boek-logos-parceiros__logo-nome {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	text-align: center;
	font-size: 0.55rem;
	font-weight: 700;
	color: var(--boek-petroleo);
	background: linear-gradient(180deg, rgba(247, 247, 251, 0.15), rgba(247, 247, 251, 0.85) 55%);
}

.boek-logos-parceiros__nome {
	font-size: var(--boek-text-small);
	font-weight: 600;
}

/* 3. Vitrine das linhas (boek/vitrine-linhas) — grid 3 col desktop,
   carrossel scroll-snap mobile (§7.4 item 8, sem lib JS). */
.boek-vitrine-linhas__lista {
	display: flex;
	align-items: stretch;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-block: 0.5rem;
	margin-inline: -1rem;
	padding-inline: 1rem;
}

.card-linha-produto {
	flex: 0 0 85%;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: 0.5rem;
	padding: 1.5rem;
	border-radius: 1rem;
	background-color: var(--boek-white);
	box-shadow: 0 1px 3px rgba(15, 14, 26, 0.1);
	transition: box-shadow var(--boek-transition), transform var(--boek-transition);
}

.card-linha-produto:hover {
	box-shadow: 0 8px 24px rgba(15, 14, 26, 0.12);
	transform: translateY(-2px);
}

/* CTA sempre no rodapé — o mesmo "efeito escada" das screenshots do
   usuário (Prompt 8.5.2), reproduzido aqui porque "texto" (a descrição
   de cada item) varia de tamanho item a item. */
.card-linha-produto__link {
	margin-top: auto;
}

@media (min-width: 900px) {
	.boek-vitrine-linhas__lista {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		align-items: stretch;
		overflow-x: visible;
		margin-inline: 0;
		padding-inline: 0;
	}

	.card-linha-produto {
		flex: initial;
	}
}

.card-linha-produto__icone {
	width: 56px;
	border-radius: 0.75rem;
	overflow: hidden;
	background-color: var(--boek-creme);
}

.card-linha-produto__icone img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.card-linha-produto__titulo a {
	color: var(--boek-petroleo);
	text-decoration: none;
}

/* 4/6. Destaque TV / Destaque Apps — link "ver todos" centralizado.
   Sem margin-top: a seção-pai agora é flex column com gap, que já
   espaça esse link do grid acima igual a todo o resto do ritmo vertical. */
.boek-destaque-tv__link-todos,
.boek-destaque-apps__link-todos,
.boek-destaque-leitura .boek-cta-skeelo {
	text-align: center;
}

.boek-destaque-leitura .boek-cta-skeelo {
	align-items: center;
}

/* 9. Como funciona (boek/como-funciona) — seção crítica: 3 passos bem
   escaneáveis, numerados visualmente. */
.boek-como-funciona {
	text-align: center;
}

.boek-como-funciona__subtitulo {
	max-width: 60ch;
	margin-inline: auto;
}

.boek-como-funciona__passos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	list-style: none;
	padding: 0;
	counter-reset: none;
}

@media (min-width: 900px) {
	.boek-como-funciona__passos {
		grid-template-columns: repeat(3, 1fr);
	}
}

.boek-como-funciona__passo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.boek-como-funciona__numero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--boek-coral);
	color: var(--boek-ink);
	font-family: var(--boek-font-heading);
	font-weight: 700;
	font-size: var(--boek-text-h6);
}

.boek-como-funciona__icone {
	width: 56px;
	border-radius: 0.75rem;
	overflow: hidden;
	background-color: var(--boek-creme);
}

.boek-como-funciona__icone img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.boek-como-funciona__titulo {
	margin: 0;
}

.boek-como-funciona__texto {
	max-width: 40ch;
	margin: 0;
}

/* 10. Legalidade (boek/legalidade) — argumento central, fundo de
   destaque pra chamar atenção (mesmo tratamento visual de hub-legalidade
   já usado em /tv/). */
.boek-legalidade {
	background-color: var(--boek-petroleo);
	color: var(--boek-white);
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

.boek-legalidade .container {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 900px;
	text-align: center;
}

.boek-legalidade__texto {
	max-width: 70ch;
	margin-inline: auto;
}

.boek-legalidade__texto p + p {
	margin-top: 1rem;
}

.boek-legalidade__argumentos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	list-style: none;
	padding: 0;
	text-align: left;
}

@media (min-width: 600px) {
	.boek-legalidade__argumentos {
		grid-template-columns: repeat(2, 1fr);
	}
}

.boek-legalidade__argumentos li {
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	background-color: rgba(255, 255, 255, 0.08);
	font-size: var(--boek-text-small);
}

/* 11. FAQ resumido (boek/faq-resumido) — sem margin-top: a seção-pai é
   flex column com gap (ver regra compartilhada no topo do arquivo). */
.boek-faq-resumido__link-todas {
	text-align: center;
}

/* 12. CTA final (boek/cta-final) — full-width */
.boek-cta-final-home {
	background-color: var(--boek-surface);
	color: var(--boek-white);
	padding-block: clamp(3rem, 6vw, 4.5rem);
	text-align: center;
}

.boek-cta-final-home .container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.boek-cta-final-home__subtitulo {
	max-width: 60ch;
}

.boek-cta-final-home .boek-whatsapp-cta {
	align-items: center;
}

/* .boek-whatsapp-cta__horario usa --boek-ink com opacidade 0.75 por
   padrão (botoes.css) — funciona nos fundos claros onde o componente
   aparece na maior parte do site, mas aqui o fundo é escuro
   (--boek-surface): ink a 75% de opacidade sobre um fundo quase da
   mesma cor rende ~1.1:1 de contraste, praticamente ilegível (achado
   real via Lighthouse/axe, §17). */
.boek-cta-final-home .boek-whatsapp-cta__horario {
	color: var(--boek-white);
	opacity: 0.85;
}