/**
 * EZbrew — Linha Homebrew
 * =============================================================================
 * Porte da página que está no ar, com as medidas lidas no navegador: capa de
 * 309px sobre a textura azul, faixas de fundo #F0EFEC e os cards de produto em
 * grade de até três colunas.
 *
 * Os tokens ficam em `.ez-pagina--homebrew` e não no `:root` porque esta
 * página não carrega o CSS da home — mesma decisão de contato.css e sobre.css.
 */

.ez-pagina--homebrew {
	--hb-areia:  #F0EFEC;
	--hb-azul:   #1A2B3B;
	--hb-navy:   #10233A;
	--hb-cobre:  #CA7441;
	--hb-cobre-texto: #A65628;
	--hb-texto:  #55616F;
	--hb-borda:  #E3E1DA;

	--hb-exo:     "Exo 2", sans-serif;
	--hb-grotesk: "Space Grotesk", sans-serif;

	background: var(--hb-areia);
	font-family: var(--hb-exo);
	color: var(--hb-texto);
}

.ez-pagina--homebrew *,
.ez-pagina--homebrew *::before,
.ez-pagina--homebrew *::after {
	box-sizing: border-box;
}

.ez-pagina--homebrew :where(p, h1, h2, h3, ul, ol, li, figure) {
	margin: 0;
}

.ez-pagina--homebrew ul {
	padding: 0;
	list-style: none;
}

.ez-pagina--homebrew img {
	display: block;
	max-width: 100%;
}

.ez-pagina--homebrew .ez-wrap {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 20px;
}

/* A âncora para abaixo do cabeçalho grudado. */
.ez-pagina--homebrew [id] {
	scroll-margin-top: calc(var(--ez-cabecalho, 149px) + 16px);
}

.hb-secao {
	padding-block: clamp(34px, 3.8vw, 52px);
}

/* --- tipos compartilhados ------------------------------------------------- */

.hb-olho {
	font-family: var(--hb-grotesk);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hb-cobre-texto);
}

.hb-titulo {
	margin-top: 8px;
	font-size: clamp(24px, 2.4vw, 31px);
	font-weight: 600;
	color: var(--hb-azul);
}

.hb-titulo--centro {
	text-align: center;
}

.hb-lead {
	margin-top: 14px;
	max-width: 58ch;
	font-size: 15.5px;
	line-height: 1.7;
}

/* --- botão ---------------------------------------------------------------- */

.hb-btn {
	display: inline-block;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: 7px;
	background: var(--hb-cobre);
	color: #FFFFFF;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	transition: filter .16s ease, background .16s ease, color .16s ease;
}

.hb-btn:hover {
	filter: brightness(1.07);
}

/* O botão do card é vazado: três botões cheios por linha brigavam entre si. */
.hb-btn--vazado {
	display: block;
	padding: 10px 16px;
	border-color: var(--hb-cobre-texto);
	background: transparent;
	color: var(--hb-cobre-texto);
	font-size: 12.5px;
	letter-spacing: .06em;
	text-align: center;
	text-transform: uppercase;
}

.hb-btn--vazado:hover {
	background: var(--hb-cobre);
	color: #FFFFFF;
	filter: none;
}

/* --- capa ----------------------------------------------------------------- */

.hb-capa {
	position: relative;
	display: grid;
	align-items: center;
	min-height: 309px;
	isolation: isolate;
	overflow: hidden;
	background: var(--hb-navy);
}

.hb-capa__fundo {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.hb-capa__fundo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hb-capa__inner {
	padding-block: 36px;
}

.hb-capa__titulo {
	font-size: clamp(28px, 3.2vw, 38px);
	font-weight: 600;
	color: #FFFFFF;
}

.hb-capa__texto {
	margin-top: 12px;
	max-width: 46ch;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .86);
}

.hb-capa__inner .hb-btn {
	margin-top: 20px;
}

/* --- sobre a linha -------------------------------------------------------- */

/*
 * Texto largo, cartão estreito — e o cartão centrado na altura do texto.
 *
 * Medido na produção em 1400px: a coluna de texto tem 740 e o cartão 380. O
 * nosso estava em 610 e 488, e com `align-items: start` o cartão de 133px
 * ficava colado no topo de uma coluna de 274 — sobravam 141px de vazio ao
 * lado dele. Foi o que o cliente descreveu como "janela pequena e
 * desalinhada".
 *
 * `center` e não `stretch`: esticar o cartão afastaria as três frases umas
 * das outras conforme o texto da esquerda crescesse, e o cartão passaria a
 * ter altura decidida pelo vizinho.
 */
.hb-sobre__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 60px);
	align-items: center;
}

.hb-destaques {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 20px;
	margin-top: 26px;
}

.hb-destaques li {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--hb-azul);
}

.hb-destaques__icone {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 11px;
	background: #FFFFFF;
	color: var(--hb-cobre-texto);
}

/*
 * Medidas da produção: canto de 15px e as três frases com respiro.
 *
 * O seletor é duplo porque o reset `.ez-pagina--homebrew ul { padding: 0 }`
 * tem mais peso (0,2,1 contra 0,1,0) e zerava o recuo daqui — o texto
 * encostava na borda do cartão. Medido no navegador: `padding` computado era
 * `0px` apesar da regra abaixo existir.
 */
.ez-pagina--homebrew .hb-cartao {
	display: grid;
	padding: 8px 24px;
	border-radius: 15px;
	background: #FFFFFF;
	box-shadow: 0 4px 22px rgba(26, 43, 59, .07);
}

/*
 * Uma linha fina separa as três frases.
 *
 * Sem ela as frases têm alturas muito diferentes — uma, duas e três linhas —
 * e o espaço em branco entre elas lê como desalinho em vez de divisão. A
 * linha diz que são três afirmações, e não um parágrafo mal quebrado.
 */
.hb-cartao li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding-block: 16px;

	/* 16px, como na produção. Em 14 as três frases encolhiam o cartão a menos
	   da metade da altura da coluna ao lado. */
	font-size: 16px;
	line-height: 1.6;
	color: var(--hb-azul);
}

.hb-cartao li + li {
	border-top: 1px solid var(--hb-borda);
}

/*
 * O ícone alinha com a PRIMEIRA LINHA do texto, e não com o topo da caixa.
 *
 * `align-items: flex-start` encostava os 20px do desenho no topo de uma linha
 * de 25,6px, e ele ficava alto demais — visível sobretudo nas frases de duas
 * e três linhas. A caixa do ícone passa a ter a altura de uma linha, com o
 * desenho centrado dentro dela.
 */
.hb-cartao__icone {
	display: grid;
	place-items: center;
	flex: none;
	width: 20px;
	height: 1.6em;
	color: var(--hb-cobre-texto);
}

/* --- navegue por etapas --------------------------------------------------- */

.hb-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

.hb-chips a,
.hb-chips span {
	display: block;
	padding: 13px 22px;
	border-radius: 9px;
	background: var(--hb-navy);
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .16s ease;
}

.hb-chips a:hover {
	background: var(--hb-cobre);
}

/*
 * Medido na produção: o bloco inteiro é `elementor-hidden-tablet
 * elementor-hidden-mobile` — aparece só acima de 1024px. Faz sentido: são seis
 * botões grandes que, no celular, empurram os produtos para fora da primeira
 * tela sem levar a lugar nenhum que o dedo já não alcance rolando.
 */
@media (max-width: 1024px) {
	.hb-etapas {
		display: none;
	}
}

/* --- linha de produtos ---------------------------------------------------- */

.hb-linha {
	padding-block: clamp(18px, 2vw, 26px);
}

.hb-linha__titulo {
	margin-top: 6px;
	font-size: clamp(19px, 1.7vw, 22px);
	font-weight: 600;
	color: var(--hb-azul);
}

/*
 * Até três por fileira, e cada um com no máximo 340px.
 *
 * `auto-fill` com `minmax` e não `repeat(3, 1fr)`: a linha de Filtração tem UM
 * card e a de Tanques tem dois. Com três colunas fixas o card único esticava
 * para um terço vazio da tela.
 */
.hb-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
	gap: 20px;
	margin-top: 16px;
}

.hb-card {
	display: flex;
	flex-direction: column;
	/* 30px e raio 15, como na produção: card de 360 com 300 de área útil. */
	padding: 30px;
	border: 1px solid var(--hb-borda);
	border-radius: 15px;
	background: #FFFFFF;
	text-align: center;
}

/*
 * A foto ocupa a largura inteira do card, num quadrado.
 *
 * Era uma caixa de 210px de altura, e como as fotos são 500x500 elas paravam
 * em 177px — quase metade dos 298px que a produção mostra. Equipamento de
 * cervejaria em miniatura não vende: a foto É o produto nesta página.
 *
 * `aspect-ratio: 1` e não altura fixa: o quadrado acompanha a largura do card
 * quando a grade aperta, em vez de virar retângulo.
 */
.hb-card__foto {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	margin-bottom: 14px;
}

.hb-card__foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hb-card__nome {
	font-size: 16px;
	font-weight: 700;
	color: var(--hb-azul);
}

.hb-card__specs {
	display: grid;
	gap: 5px;
	margin: 10px 0 16px;
	text-align: left;
}

.hb-card__specs li {
	position: relative;
	padding-left: 14px;
	font-size: 12.5px;
	line-height: 1.5;
}

.hb-card__specs li::before {
	content: "•";
	position: absolute;
	left: 2px;
	color: var(--hb-cobre-texto);
}

/* Empurra o botão para a base: cards com listas de tamanhos diferentes ficavam
   com os botões em alturas diferentes na mesma fileira. */
.hb-card .hb-btn--vazado {
	margin-top: auto;
}

/* --- como escolher -------------------------------------------------------- */

.hb-escolher .hb-olho {
	text-align: center;
}

.hb-passos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin-top: 26px;
}

.hb-passos li {
	display: grid;
	justify-items: start;
	gap: 7px;
	padding: 20px;
	border: 1px solid var(--hb-borda);
	border-radius: 13px;
	background: #FFFFFF;
}

.hb-passos__icone {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: var(--hb-areia);
	color: var(--hb-cobre-texto);
}

.hb-passos strong {
	font-size: 15.5px;
	color: var(--hb-azul);
}

.hb-passos span:last-child {
	font-size: 13.5px;
	line-height: 1.6;
}

.hb-escolher__acao {
	margin-top: 26px;
	text-align: center;
}

/* --- chamada final -------------------------------------------------------- */

.hb-chamada {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--hb-navy);
}

.hb-chamada__fundo {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.hb-chamada__fundo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Véu em gradiente: a foto fica visível à direita e o texto legível à
   esquerda, que é como a produção resolve. */
.hb-chamada__fundo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(16, 35, 58, .93) 0%, rgba(16, 35, 58, .78) 52%, rgba(16, 35, 58, .30) 100%);
}

.hb-chamada__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	padding-block: clamp(30px, 3.4vw, 46px);
}

.hb-chamada__titulo {
	max-width: 30ch;
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 600;
	color: #FFFFFF;
}

.hb-chamada__texto {
	margin-top: 10px;
	max-width: 46ch;
	font-size: 14.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .84);
}

/* --- telas estreitas ------------------------------------------------------ */

@media (max-width: 900px) {
	.hb-sobre__inner {
		grid-template-columns: minmax(0, 1fr);

		/* Em coluna única não há o que centrar: o cartão volta ao fluxo. */
		align-items: start;
	}
}

@media (max-width: 560px) {
	.hb-destaques {
		grid-template-columns: minmax(0, 1fr);
	}

	.hb-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.hb-chips a,
	.hb-chips span {
		padding: 11px 16px;
		font-size: 13px;
	}
}