/**
 * EZbrew — Home em codigo
 * =============================================================================
 * Copia fiel da pagina 5739 (/modelo). Cores, fontes, tamanhos, espacamentos e
 * raios foram lidos do proprio _elementor_data / post-5739.css, nao estimados.
 *
 * Escopo: tudo vive dentro de .ez-home, entao nada vaza para o resto do site.
 *
 * Ordem: tokens -> base -> blocos compartilhados -> secoes -> responsivo.
 */

/* =============================================================================
 * 1. TOKENS
 * ========================================================================== */
/* Alvos de ancora (#homebrew, #linhapro, #jornada, #contato, #scroll) param
   abaixo do cabecalho grudado. Sem isto o topo da secao fica escondido atras
   dele: medi a secao parando a -60px da viewport. */
.ez-home [id] {
	scroll-margin-top: calc(var(--ez-cabecalho, 149px) + 16px);
}

.ez-home {
	/* Paleta, exatamente como estava no Elementor */
	--ez-creme:        #F5F3EF; /* fundo da secao 2 e da moldura da hero */
	--ez-areia:        #E5E6E0; /* fundo da maioria das secoes claras */
	--ez-areia-clara:  #EEEFE9; /* cartoes da fase fria e fundo do contato */
	--ez-azul:         #203954; /* fundo das secoes escuras e painel Linha Pro */
	--ez-azul-cartao:  #1A2B3B; /* cartao das linhas e painel do manifesto */
	--ez-azul-fundo:   #152538; /* cartao das fases escuras */
	--ez-cobre:        #CA7441; /* titulos de cartao, olhos, seta do hero */

	/* Cobre de TEXTO: 5,27 de contraste sobre branco, contra 3,45 do de
	   marca. Ver o :root de site.css. */
	--ez-cobre-texto:  #A65628;
	--ez-cobre-2:      #C87541; /* variante usada em "solucao completa" */
	--ez-cobre-3:      #b87333; /* inicio do gradiente do hero */
	--ez-marrom:       #9F7454; /* botao "conhecer a linha" */
	--ez-dourado:      #D5BA83; /* olho do hero e divisor do manifesto */
	--ez-dourado-2:    #B8996A; /* olho das secoes de fase */
	--ez-preto:        #000000;
	--ez-preto-texto:  #000305;

	/* Fontes do site. Exo 2 e Diavlo sao fontes customizadas do proprio
	   WordPress; as demais vem do Google. */
	--ez-exo:      "Exo 2", sans-serif;
	--ez-diavlo:   "Diavlo", "Exo 2", sans-serif;
	--ez-sora:     "Sora", sans-serif;
	--ez-inter:    "Inter", sans-serif;
	--ez-grotesk:  "Space Grotesk", sans-serif;

	--ez-raio: 25px;

	/* Resolucao da planta tecnica. A grande (114 KB) so entra acima de 900px;
	   abaixo disso a de 1032px (23 KB) ja e maior que a maior area em que a
	   arte aparece. Ver .ez-manifesto__painel e .ez-jornada__planta. */
	--ez-planta: var(--ez-planta-p);
	--ez-gap:  30px;
	--ez-wrap: 1140px;

	--velocidade-animacao: 2s;

	font-family: var(--ez-exo);
	color: var(--ez-preto);
	/* Esta cor so aparece na moldura em volta da hero — todas as secoes
	   pintam o proprio fundo. E o mesmo creme da secao 2, para a moldura
	   emendar com ela sem degrau. O padding-top segura a margem da hero
	   dentro do wrapper; sem ele ela escapava e a faixa de cima ficava com
	   o cinza do body do tema (#F5F5F5), diferente do das laterais. */
	background: var(--ez-creme);
	padding-top: 20px;
	overflow-x: clip;
}

/* =============================================================================
 * 2. BASE
 * As regras de base usam :where() de proposito: assim elas valem zero na conta
 * de especificidade e qualquer classe de componente vence sem !important.
 * ========================================================================== */
.ez-home *,
.ez-home *::before,
.ez-home *::after {
	box-sizing: border-box;
}

.ez-home :where(img) {
	max-width: 100%;
	height: auto;
}

.ez-home :where(p) {
	margin: 0 0 1em;
}

.ez-home :where(h1, h2, h3) {
	margin: 0;
	line-height: 1.2;
}

/* O tema define a fonte por seletor de tag (p, h2...). Esta regra desfaz isso
   dentro da home. O :where() mantem a especificidade em 0,1,0: vence o seletor
   de tag do tema e ainda deixa as classes de componente escolherem a fonte
   delas. */
.ez-home :where(p, li, a, span, time, h1, h2, h3, h4, button) {
	font-family: inherit;
}

.ez-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ez-wrap {
	width: 100%;
	max-width: var(--ez-wrap);
	margin-inline: auto;
	padding-inline: 10px;
}

/* Cada secao do original tem a sua largura de caixa. Estes numeros foram
   medidos na pagina 5739, nao arredondados. */
.ez-wrap--largo             { max-width: 1328px; }
.ez-pro .ez-wrap            { max-width: 1328px; }

.ez-section--areia       { background: var(--ez-areia); }
.ez-section--areia-clara { background: var(--ez-areia-clara); }
.ez-section--branco      { background: #FFFFFF; }

.ez-home a:focus-visible,
.ez-home button:focus-visible {
	outline: 2px solid var(--ez-cobre);
	outline-offset: 3px;
}

/* =============================================================================
 * 3. TIPOGRAFIA DAS SECOES
 * ========================================================================== */

/* Olho ("Especial", "01 · Filtração", "Fale com a EZbrew") */
.ez-eyebrow {
	margin: 0;
	font-family: var(--ez-exo);
	font-size: 16px;
	font-weight: 900;
	line-height: 27px;
	letter-spacing: 2.7px;
	text-transform: uppercase;
	color: var(--ez-cobre-texto);
}

.ez-eyebrow--centro {
	text-align: center;
}

/* Titulo grande centralizado: "LINHA HOMEBREW.", "Linha Pro", "Blog" */
.ez-titulo-display {
	margin: 20px 0 0;
	font-family: var(--ez-diavlo);
	font-size: 47px;
	font-weight: 500;
	text-align: center;
	text-transform: uppercase;
	color: var(--ez-preto);
}

.ez-titulo-display--claro {
	font-weight: 600;
	line-height: 55px;
	text-transform: none;
	color: #FFFFFF;
}

/* No manifesto o titulo e caixa alta e pesado, como no desenho do cliente.
   Exo 2 em 800 (a mesma familia do "LINHA PRO") e bem mais estreito que a
   Diavlo, entao as duas linhas do <br> cabem sem quebrar de novo. */
.ez-manifesto .ez-titulo-display--claro {
	margin-top: 22px;
	font-family: var(--ez-exo);
	font-size: clamp(27px, 3.7vw, 53px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: .005em;
	text-transform: uppercase;
}

/* Titulo das secoes de fase e do contato, alinhado a esquerda */
.ez-titulo-secao {
	margin: 0;
	font-family: var(--ez-exo);
	font-size: 38px;
	font-weight: 600;
	color: var(--ez-preto);
}

/* Linha de apoio abaixo do titulo */
.ez-subtexto {
	max-width: 560px;
	margin: 20px auto 0;
	font-family: var(--ez-sora);
	font-size: 20px;
	font-weight: 400;
	line-height: 27px;
	text-align: center;
	color: var(--ez-preto);
}

.ez-subtexto--esquerda {
	max-width: none;
	margin-inline: 0;
	font-family: var(--ez-exo);
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
}

/* =============================================================================
 * 4. BOTOES
 * ========================================================================== */
.ez-btn {
	display: block;
	width: 100%;
	padding: 12px 24px;
	border: 0;
	border-radius: 3px;
	background: var(--ez-marrom);
	font-family: var(--ez-grotesk);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: #FFFFFF;
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease;
}

.ez-btn:hover,
.ez-btn:focus-visible {
	background: #8A6244;
	color: #FFFFFF;
	transform: translateY(-1px);
}

.ez-btn--cobre {
	display: inline-block;
	width: auto;
	padding: 15px 32px;
	border-radius: 30px;
	background: var(--ez-cobre-2);
	font-family: var(--ez-exo);
	font-weight: 900;
}

.ez-btn--cobre:hover,
.ez-btn--cobre:focus-visible {
	background: #B4652F;
}

.ez-btn--azul {
	display: inline-block;
	width: auto;
	padding: 15px 34px;
	border-radius: 40px;
	background: var(--ez-azul-cartao);
	font-family: var(--ez-exo);
	font-weight: 900;
}

.ez-btn--azul:hover,
.ez-btn--azul:focus-visible {
	background: #24384E;
}

/* CTA do manifesto: dourado da marca sobre o painel azul, texto azul. Canto
   suave (6px) e nao pilula, como no desenho do cliente. */
.ez-btn--dourado {
	display: inline-block;
	width: auto;
	padding: 17px 42px;
	border-radius: 6px;
	background: var(--ez-dourado);
	font-family: var(--ez-grotesk);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--ez-azul-cartao);
}

.ez-btn--dourado:hover,
.ez-btn--dourado:focus-visible {
	background: #E3CD9E;
	color: var(--ez-azul-cartao);
}

/* =============================================================================
 * 5. CARTAO DE PRODUTO
 * A caixa da imagem tem altura fixa e object-fit:contain — e o que alinha os
 * produtos numa mesma linha de base, apesar de cada arquivo ter uma sobra
 * transparente diferente.
 * ========================================================================== */
.ez-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 20px 30px;
	background: var(--ez-azul-cartao);
	border: 1px solid #344E6D;
	border-radius: var(--ez-raio);
	text-align: left;
	transition: transform .2s ease, box-shadow .2s ease;
}

/* Como o widget de imagem do Elementor: a arte aparece no tamanho natural dela,
   limitada a largura util do cartao. Nunca e ampliada — e o que mantem o
   produto nitido, ja que os arquivos tem no maximo 300px. */
.ez-card__media {
	display: grid;
	place-items: center;
	width: 100%;
	margin-bottom: 16px;
}

.ez-card__media img {
	width: auto;
	height: auto;
	max-width: 100%;
	transition: transform .35s ease;
}

.ez-card:hover .ez-card__media img {
	transform: translateY(-6px);
}

.ez-card__title {
	margin: 0;
	font-family: var(--ez-grotesk);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ez-cobre-texto);
}

.ez-card__text {
	flex: 1 1 auto;
	margin: 10px 0 0;
	font-family: var(--ez-grotesk);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: #FFFFFF;
}

.ez-card__text b {
	font-weight: 700;
}

.ez-card__cta {
	margin-top: 20px;
}

.ez-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(0, 0, 0, .28);
}

/* =============================================================================
 * 6. GRADE E CARROSSEL
 * ========================================================================== */
.ez-grade {
	display: grid;
	gap: 20px;
	align-items: stretch;
	margin-top: 35px;
}

.ez-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ez-grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ez-carousel {
	position: relative;
	margin-top: 35px;
}

.ez-carousel__track {
	/* Respiro lateral da faixa. Zero por padrao; as secoes que deixam a arte
	   transbordar redefinem (ver .ez-linha--homebrew e .ez-linha--pro). */
	--ez-respiro: 0px;

	/* Largura do esmaecimento das bordas. Normalmente acompanha o respiro,
	   mas as duas coisas sao independentes: onde a arte avanca para dentro do
	   respiro, o esmaecimento precisa ser MENOR que ele, senao apaga a propria
	   arte em vez de so dissolver a sombra do cartao que saiu de vista. */
	--ez-fade: var(--ez-respiro);

	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - var(--ez-gap) * 3) / 4);
	gap: var(--ez-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block: 4px;
	scrollbar-width: none;

	/* Com a faixa rolada, o cartao anterior sai da area visivel mas a sombra
	   dele continua desenhada dentro do respiro — e como a sombra e mais densa
	   justamente encostada no cartao, o corte do container caia no ponto mais
	   escuro e virava um risco vertical.
	   A mascara dissolve exatamente essa faixa de respiro: onde so ha sombra.
	   Os cartoes comecam depois dela (scroll-padding-inline), entao nao perdem
	   nitidez quando encaixados. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ez-fade), #000 calc(100% - var(--ez-fade)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--ez-fade), #000 calc(100% - var(--ez-fade)), transparent 100%);
}

.ez-carousel__track::-webkit-scrollbar {
	display: none;
}

/* Arrastar com o mouse (ver arrastar() em home-ezbrew.js). A classe so entra
   quando o JS liga o comportamento — sem ele, nada de cursor prometendo algo
   que nao acontece. */
.ez-arrastavel {
	cursor: grab;
}

.ez-arrastavel.is-arrastando {
	cursor: grabbing;
	/* Sem isto, o arrasto seleciona o texto dos cartoes pelo caminho. */
	user-select: none;
}

.ez-arrastavel.is-arrastando a,
.ez-arrastavel.is-arrastando img {
	pointer-events: none;
}

.ez-carousel__track > * {
	scroll-snap-align: start;
}

.ez-carousel__track:focus-visible {
	outline: 2px solid var(--ez-cobre);
	outline-offset: 6px;
}

/* Setas como no original: so o chevron cobre, sem circulo, fora dos cartoes. */
/* Seta de navegacao — PADRAO DO SITE.
   Antes havia tres desenhos diferentes: copre sem fundo na base, circulo
   branco no Homebrew e circulo azul na Linha Pro. O circulo branco foi o
   aprovado, entao virou o padrao e os outros dois sairam. */
.ez-carousel__nav {
	position: absolute;
	top: 58%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid rgba(16, 30, 44, .08);
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--ez-azul-cartao);
	box-shadow: 0 10px 26px rgba(16, 30, 44, .14);
	cursor: pointer;
	transition: transform .18s ease, opacity .18s ease,
		background-color .18s ease, border-color .18s ease, color .18s ease;
}

.ez-carousel__nav svg {
	width: 22px;
	height: 22px;
}

.ez-carousel__nav:hover {
	background: var(--ez-cobre);
	border-color: var(--ez-cobre-texto);
	color: #FFFFFF;
}

.ez-carousel__nav:focus {
	outline: none;
}

.ez-carousel__nav:focus-visible {
	outline: 2px solid var(--ez-cobre);
	outline-offset: 3px;
}

.ez-carousel__nav--prev { left: -30px; }
.ez-carousel__nav--next { right: -30px; }

.ez-carousel__nav[disabled] {
	opacity: .3;
	box-shadow: none;
	cursor: default;
}

.ez-carousel__nav[disabled]:hover {
	background: #FFFFFF;
	border-color: rgba(16, 30, 44, .08);
	color: var(--ez-azul-cartao);
}

.ez-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 26px;
}

.ez-carousel__dot {
	width: 6px;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .25);
	cursor: pointer;
	transition: background-color .2s ease;
}

/* Clicar num ponto deixava o anel de foco laranja preso nele, e o anel
   parecia o ponto ativo — dois pontos disputando a atencao. O anel agora
   aparece so para quem navega pelo teclado, que e quem precisa dele. */
.ez-carousel__dot:focus {
	outline: none;
}

.ez-carousel__dot:focus-visible {
	outline: 2px solid var(--ez-cobre);
	outline-offset: 3px;
}

.ez-painel .ez-carousel__dot {
	background: rgba(255, 255, 255, .35);
}

.ez-carousel__dot.is-active {
	background: var(--ez-preto);
}

.ez-painel .ez-carousel__dot.is-active {
	background: #FFFFFF;
}

/* =============================================================================
 * 7. HERO
 * ========================================================================== */
.ez-hero {
	position: relative;
	display: grid;
	place-items: center;
	width: 96%;
	min-height: 841px;
	margin: 0 auto;
	border-radius: var(--ez-raio);
	overflow: hidden;
	isolation: isolate;
	background: var(--ez-creme);
	text-align: center;
	color: #FFFFFF;
}

.ez-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.ez-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Veu escuro concentrado no miolo, onde fica o texto do hero. A foto de fundo
   e quente e clara nas laterais; sem isso o titulo em degrade some no cobre.
   Ajuste as paradas se trocar a arte. */
.ez-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(58% 46% at 50% 46%, rgba(10, 8, 6, .74) 0%, rgba(10, 8, 6, .34) 62%, rgba(10, 8, 6, 0) 100%),
		linear-gradient(180deg, rgba(10, 8, 6, .34) 0%, rgba(10, 8, 6, .12) 45%, rgba(10, 8, 6, .40) 100%);
}

.ez-hero__inner {
	width: 100%;
	max-width: 900px;
	padding: 60px 20px;
}

.ez-hero__eyebrow {
	margin: 0 0 18px;
	/* Trocadas de lugar a pedido: a linha de cima em Diavlo, o titulo em
	   Exo 2. Era o contrario. */
	font-family: var(--ez-diavlo);
	font-size: 25px;
	font-weight: 600;
	letter-spacing: 2.7px;
	text-transform: uppercase;
	color: var(--ez-dourado);
}

.ez-hero__title {
	margin: 0;
	font-family: var(--ez-exo);
	font-size: 41px;
	font-weight: 600;
	line-height: 44px;
	color: #FFFFFF;
}

/* Gradiente cobre/branco deslizando — o mesmo .snapgradiente do original. */
.ez-gradiente {
	background: linear-gradient(
		to right,
		var(--ez-cobre-3) 20%,
		#FFFFFF 40%,
		#FFFFFF 60%,
		var(--ez-cobre-3) 80%
	);
	background-size: 200% auto;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: ez-gradiente var(--velocidade-animacao) linear infinite;
}

@keyframes ez-gradiente {
	to { background-position: 200% center; }
}

.ez-hero__text {
	margin: 24px auto 0;
	max-width: 640px;
	font-family: var(--ez-inter);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	color: #FFFFFF;
}

/* Seta com brilho e flutuacao, como no CSS customizado da pagina antiga. */
.ez-hero__scroll {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-top: 36px;
	color: var(--ez-cobre-texto);
	animation: ez-flutuar-seta 1.8s ease-in-out infinite;
	filter:
		drop-shadow(0 0 4px rgba(202, 116, 65, .8))
		drop-shadow(0 0 10px rgba(202, 116, 65, .45));
	will-change: transform;
}

.ez-hero__scroll svg {
	width: 24px;
	height: 30px;
}

@keyframes ez-flutuar-seta {
	0%, 100% { transform: translateY(-3px); }
	50%      { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
	.ez-hero__scroll,
	.ez-gradiente { animation: none; }
	.ez-home * { transition-duration: .01ms !important; }
}

/* =============================================================================
 * 8. VOCE FAZ A CERVEJA
 * Duas colunas: texto a esquerda, arte do equipamento a direita.
 * ========================================================================== */
.ez-promessa {
	position: relative;
	padding-block: clamp(56px, 6vw, 96px);
	/* Creme com um leve halo mais claro a direita, onde fica o equipamento —
	   como na referencia. */
	background:
		radial-gradient(70% 90% at 72% 45%, #FBFAF8 0%, rgba(251, 250, 248, 0) 70%),
		var(--ez-creme);
	overflow: hidden;

	/* Emoldurada, na mesma medida da hero logo acima (96% e o mesmo raio).
	   Antes corria de ponta a ponta e encostava nas bordas, enquanto a hero
	   tinha respiro dos dois lados — o degrau entre as duas era visivel. */
	width: 96%;
	margin: 0 auto;
	border-radius: var(--ez-raio);
}

.ez-promessa__inner {
	display: grid;
	grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
	gap: clamp(24px, 3vw, 48px);
	align-items: center;
	max-width: 1328px;
}

/* --- olho, com filete e reticencia ---------------------------------------- */
.ez-promessa__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 26px;
	font-family: var(--ez-exo);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2.7px;
	text-transform: uppercase;
	color: var(--ez-cobre-texto);
}

.ez-promessa__risco {
	flex: 1 1 auto;
	height: 1px;
	min-width: 24px;
	background: currentColor;
	opacity: .5;
}

.ez-promessa__pontos {
	flex: none;
	width: 34px;
	height: 5px;
	background:
		radial-gradient(circle, currentColor 50%, transparent 55%) 0 50% / 5px 5px no-repeat,
		radial-gradient(circle, currentColor 50%, transparent 55%) 50% 50% / 5px 5px no-repeat,
		radial-gradient(circle, currentColor 50%, transparent 55%) 100% 50% / 5px 5px no-repeat;
}

/* --- titulo --------------------------------------------------------------- */
.ez-promessa__titulo {
	margin: 0;
	font-family: var(--ez-exo);
	font-size: clamp(30px, 3.2vw, 46px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #14161A;
}

/* O quadradinho cobre no fim do titulo. */
.ez-promessa__ponto {
	display: inline-block;
	width: .16em;
	height: .16em;
	margin-left: .06em;
	vertical-align: baseline;
	background: var(--ez-cobre);
}

.ez-promessa__lead {
	margin: 22px 0 0;
	max-width: 46ch;
	font-family: var(--ez-exo);
	font-size: clamp(15px, 1.3vw, 19px);
	font-weight: 400;
	line-height: 1.5;
	color: #4A4F55;
}

/* --- os tres diferenciais ------------------------------------------------- */
.ez-promessa__itens {
	margin: clamp(28px, 3vw, 44px) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #DEDBD4;
}

.ez-promessa__itens li {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 18px 0;
	border-bottom: 1px solid #DEDBD4;
}

.ez-promessa__icone {
	flex: none;
	width: 42px;
	height: 42px;
	background: var(--ez-cobre);
	mask: var(--ez-icone) no-repeat center / contain;
	-webkit-mask: var(--ez-icone) no-repeat center / contain;
}

/* Medido no navegador: os desenhos dos dois primeiros SVG encostam na borda do
   viewBox (recuo de 0% e 1%), mas o do quality-assurance tem 11,5% de sobra de
   cada lado. Centralizado, ele comecava 4,8px a direita dos outros e a coluna
   de icones ficava desalinhada. O deslocamento abaixo encosta os tres na mesma
   regua. Nao da para escalar junto: o desenho ja usa 100% da altura. */
.ez-promessa__itens li:nth-child(3) .ez-promessa__icone {
	mask-position: -4.8px center;
	-webkit-mask-position: -4.8px center;
}

.ez-promessa__item-texto {
	font-family: var(--ez-exo);
	font-size: clamp(14px, 1.15vw, 17px);
	line-height: 1.45;
	color: #4A4F55;
}

.ez-promessa__item-texto strong {
	display: block;
	font-weight: 700;
	color: #14161A;
}

/* --- faixa de numeros ----------------------------------------------------- */
.ez-promessa__numeros {
	display: flex;
	flex-wrap: wrap;
	margin: clamp(24px, 3vw, 40px) 0 0;
	padding: 0;
	list-style: none;
}

.ez-promessa__numeros li {
	padding: 0 clamp(18px, 2vw, 32px);
}

.ez-promessa__numeros li:first-child {
	padding-left: 0;
}

.ez-promessa__numeros li + li {
	border-left: 1px solid #DEDBD4;
}

.ez-promessa__valor {
	display: block;
	font-family: var(--ez-exo);
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--ez-cobre-texto);
}

.ez-promessa__rotulo {
	display: block;
	max-width: 18ch;
	margin-top: 6px;
	font-family: var(--ez-exo);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .06em;
	line-height: 1.35;
	text-transform: uppercase;
	color: #6B6F74;
}

/* Marcas pontilhadas no rodape da coluna, como na referencia. */
.ez-promessa__marcas {
	display: block;
	width: 240px;
	height: 4px;
	margin-top: clamp(22px, 2.5vw, 38px);
	background:
		repeating-linear-gradient(90deg, #C9C4B8 0 4px, transparent 4px 12px) 0 0 / 34px 4px no-repeat,
		repeating-linear-gradient(90deg, #C9C4B8 0 4px, transparent 4px 10px) 48px 0 / 96px 4px no-repeat,
		repeating-linear-gradient(90deg, #C9C4B8 0 4px, transparent 4px 14px) 158px 0 / 70px 4px no-repeat;
	opacity: .8;
}

/* --- a arte do equipamento ------------------------------------------------ */
.ez-promessa__arte {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 320px;
}

/* MODO PAINEL (imagem_recortada = false)
   O arquivo tem fundo escuro proprio, entao entra emoldurado: cantos
   arredondados e sombra, para nao virar um retangulo preto solto no creme. */
.ez-promessa__arte img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 20px;
	background: #14161A;
	box-shadow: 0 24px 60px rgba(20, 22, 26, .22);
}

/* MODO RECORTE (imagem_recortada = true)
   O equipamento fica solto sobre o creme e sangra ate a borda direita da tela,
   com sombra de chao suave — o layout da referencia. */
.ez-promessa__arte--recorte {
	/* Estoura a caixa de 1328px e vai ate a borda direita da janela.
	   Porcentagem nao serve aqui: dentro de um grid ela e calculada sobre a
	   celula, nao sobre a caixa. Por isso a conta usa a largura fixa da caixa
	   (1328px) mais o padding lateral (10px). O overflow:hidden da secao
	   segura qualquer sobra da barra de rolagem. */
	margin-right: calc(-1 * max(0px, (100vw - 1328px) / 2));
	/* Sai do grid: como item de grid a imagem esticava para a altura da linha
	   e entrava em laco (imagem cresce -> linha cresce). Em bloco ela usa a
	   propria proporcao. */
	display: block;
	min-height: 0;
	/* Espaco no topo para a chamada ficar acima do equipamento, e nao em cima
	   dele — como na referencia. */
	padding-top: 74px;
}

.ez-promessa__arte--recorte img {
	/* Largura da coluna (com o sangramento); altura pela proporcao da arte.
	   Sem max-height: a caixa do grid esticava a imagem e sobrava vazio. */
	width: 100%;
	max-width: none;
	height: auto;
	max-height: none;
	/* A proporcao vem do proprio arquivo, injetada pelo template. */
	aspect-ratio: var(--ez-arte-ratio, auto);
	object-fit: contain;
	display: block;
	margin-left: auto;
	border-radius: 0;
	background: none;
	box-shadow: none;
	/* Sombra que acompanha o contorno do equipamento, nao a caixa. */
	filter: drop-shadow(0 26px 26px rgba(20, 22, 26, .16));
}

/* No modo recorte a chamada volta a ser texto escuro sobre o creme. Fica
   afastada da borda da janela, ja que a arte sangra ate ela. */
.ez-promessa__arte--recorte .ez-promessa__selos {
	top: 0;
	left: auto;
	right: clamp(16px, 3vw, 56px);
	text-align: left;
}

.ez-promessa__arte--recorte .ez-promessa__selo i {
	left: auto;
	right: calc(100% + 12px);
	background: repeating-linear-gradient(90deg, #B9B3A6 0 3px, transparent 3px 7px);
}

.ez-promessa__arte--recorte .ez-promessa__selo span {
	color: #6B6F74;
}

.ez-promessa__arte--recorte .ez-promessa__selo strong,
.ez-promessa__arte--recorte .ez-promessa__selo span {
	text-shadow: none;
}

/* O arco fica atras do painel e so aparece a parte que sobra no canto
   inferior esquerdo, sobre o creme. */
.ez-promessa__arco {
	position: absolute;
	left: -12%;
	bottom: -10%;
	z-index: 0;
	width: clamp(150px, 20vw, 260px);
	height: auto;
	color: #C9C4B8;
	pointer-events: none;
}

/* --- chamada sobre a arte ------------------------------------------------- */
/* A chamada fica sobre a foto escura, entao vai em cores claras. Encostada a
   esquerda porque e ali que a foto tem area vazia — sobre o equipamento o
   texto ficaria ilegivel. */
.ez-promessa__selos {
	position: absolute;
	top: 26px;
	left: 26px;
	z-index: 2;
	max-width: 190px;
	text-align: left;
}

.ez-promessa__selo {
	position: relative;
	margin: 0;
	font-family: var(--ez-exo);
	line-height: 1.3;
}

/* O filete pontilhado sai do texto em direcao ao equipamento, a direita. */
.ez-promessa__selo i {
	position: absolute;
	left: calc(100% + 12px);
	top: .55em;
	width: 64px;
	height: 1px;
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .6) 0 3px, transparent 3px 7px);
}

.ez-promessa__selo strong {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ez-cobre-texto);
}

.ez-promessa__selo span {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
}

/* Sombra curta atras do texto, para a chamada nao sumir se a foto for
   trocada por uma mais clara naquele canto. */
.ez-promessa__selo strong,
.ez-promessa__selo span {
	text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

/* =============================================================================
 * 9. LINHA HOMEBREW E LINHA PRO
 * ========================================================================== */
.ez-linha {
	padding-block: 60px;
}


.ez-painel {
	padding: 50px;
	border-radius: var(--ez-raio);
}

.ez-painel--azul   { background: var(--ez-azul); }

.ez-pro .ez-titulo-display span {
	color: #fbba0a;
}
.ez-painel--escuro { background: var(--ez-azul-cartao); }

/* =============================================================================
 * 9b. LINHA HOMEBREW — desenho proprio
 *
 * Segue a referencia do cliente: fundo creme, olho entre filetes, titulo azul
 * pesado, cartoes com a arte saindo por cima da borda e tres por vez.
 * Tudo escopado em .ez-linha--homebrew para nao mexer na Linha Pro nem nas
 * secoes de fase, que continuam com o desenho antigo.
 * ========================================================================== */
.ez-linha--homebrew {
	background: var(--ez-creme);
	padding-block: clamp(56px, 6vw, 92px);
}

/* --- olho entre filetes ---------------------------------------------------- */
.ez-eyebrow--filetes {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
}

.ez-eyebrow--filetes i {
	width: clamp(28px, 6vw, 74px);
	height: 1px;
	background: currentColor;
	opacity: .55;
}

/* --- titulo e apoio -------------------------------------------------------- */
.ez-linha--homebrew .ez-titulo-display {
	margin-top: 14px;
	font-family: var(--ez-exo);
	font-size: clamp(34px, 5vw, 68px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.015em;
	color: var(--ez-azul-cartao);
}

.ez-linha--homebrew .ez-subtexto {
	max-width: 46ch;
	margin-top: 16px;
	font-family: var(--ez-exo);
	font-size: clamp(15px, 1.35vw, 18px);
	line-height: 1.5;
	color: #4A4F55;
}

.ez-linha--homebrew .ez-subtexto b {
	font-weight: 700;
	color: var(--ez-azul-cartao);
}

/* --- tres cartoes por vez -------------------------------------------------- */
.ez-linha--homebrew .ez-carousel {
	margin-top: 24px;
}

.ez-linha--homebrew .ez-carousel__track {
	grid-auto-columns: calc((100% - var(--ez-gap) * 2) / 3);
	/* Container de rolagem corta TUDO que passa da borda, nos quatro lados.
	   No topo o respiro e onde a arte cabe; embaixo e nas laterais e onde a
	   sombra dos cartoes se dissolve. Sem isso a sombra terminava numa linha
	   reta, como se houvesse um recorte por baixo das caixas.
	   A margem negativa devolve o alinhamento: o cartao volta a encostar na
	   mesma regua do titulo. */
	--ez-respiro: 30px;
	/* 210px no topo: e onde a arte, agora maior, sobra para fora do cartao.
	   O container de rolagem corta tudo que passa da borda, entao o respiro
	   tem de acompanhar a altura da foto. */
	padding: 300px var(--ez-respiro) 46px;
	margin-inline: calc(var(--ez-respiro) * -1);
	/* Sem isto o encaixe do scroll-snap ignora o padding lateral: a faixa
	   auto-rolava 30px e o primeiro cartao saia da regua do titulo. */
	scroll-padding-inline: 30px;
}

/* --- o cartao -------------------------------------------------------------- */
/* O equipamento e o assunto; a caixa azul e so o rodape de informacao.
   Por isso a foto cresceu e o cartao encolheu. */
.ez-linha--homebrew .ez-card {
	padding: 0 28px 22px;
	border: 0;
	border-radius: 24px;
	background: var(--ez-azul-cartao);
	box-shadow: 0 14px 30px rgba(16, 30, 44, .16);
}

.ez-linha--homebrew .ez-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 54px rgba(16, 30, 44, .22);
}

/* A arte sai por cima da borda de cima do cartao. */
.ez-linha--homebrew .ez-card__media {
	margin-top: -300px;
	margin-bottom: 12px;
	height: auto;
	align-items: flex-end;

	/* A foto pode passar da largura do cartao.
	   Antes ela parava em max-width:100%, e como os arquivos sao quadrados
	   (500x500) a ALTURA ficava presa na largura util do cartao — 247px, bem
	   abaixo do max-height. Aumentar o max-height sozinho nao mudava nada.
	   Estes 28px de cada lado sao o que deixa o equipamento crescer; sao
	   recortes com fundo transparente, entao invadir o vao entre cartoes nao
	   suja nada. */
	margin-inline: -42px;

	/* width:auto e o que faz as margens negativas VALEREM.
	   A regra base fixa width:100%, que resolve para a largura util do cartao
	   (247px). Com a largura presa, as margens negativas so deslocavam a
	   caixa para a esquerda em vez de alarga-la. Em auto, a largura usada
	   passa a ser 247 + 28 + 28 = 303px, a largura cheia do cartao. */
	width: auto;

	/* Flex, nao grid.
	   No grid a coluna e 'auto': ela se ajusta ao conteudo, e um width:100%
	   na imagem passa a depender da propria imagem para ser calculado. O
	   navegador resolve essa circularidade pelo tamanho intrinseco, e a foto
	   ficava nos mesmos 247px por mais que se aumentasse o limite. No flex a
	   largura do container e definida antes, e o 100% resolve. */
	display: flex;
	justify-content: center;
}

.ez-linha--homebrew .ez-card__media img {
	max-width: none;
	width: 100%;
	max-height: 520px;
	filter: drop-shadow(0 16px 22px rgba(16, 30, 44, .28));
}

.ez-linha--homebrew .ez-card__title {
	font-family: var(--ez-exo);
	font-size: clamp(16px, 1.35vw, 20px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--ez-bege);
}

.ez-linha--homebrew .ez-card__text {
	margin-top: 12px;
	font-family: var(--ez-exo);
	font-size: 15px;
	line-height: 1.75;
	color: rgba(255, 255, 255, .88);
}

.ez-linha--homebrew .ez-card__cta {
	margin-top: 18px;
	padding: 14px 20px;
	border-radius: 6px;
	background: var(--ez-cobre);
	font-family: var(--ez-exo);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
}

.ez-linha--homebrew .ez-card__cta:hover {
	background: var(--ez-cobre-dark, #B05F31);
}

/* --- setas e pontos -------------------------------------------------------- */

.ez-linha--homebrew .ez-carousel__nav--prev { left: -34px; }
.ez-linha--homebrew .ez-carousel__nav--next { right: -34px; }

.ez-linha--homebrew .ez-carousel__dots {
	margin-top: 8px;
	gap: 12px;
}

.ez-linha--homebrew .ez-carousel__dot {
	width: 9px;
	height: 9px;
	background: rgba(16, 30, 44, .22);
}

.ez-linha--homebrew .ez-carousel__dot.is-active {
	width: 11px;
	height: 11px;
	background: var(--ez-azul-cartao);
}

/* --- responsivo ------------------------------------------------------------ */
@media (max-width: 1180px) {
	.ez-linha--homebrew .ez-carousel__nav--prev { left: -6px; }
	.ez-linha--homebrew .ez-carousel__nav--next { right: -6px; }
}

@media (max-width: 900px) {
	.ez-linha--homebrew .ez-carousel__track {
		grid-auto-columns: calc((100% - var(--ez-gap)) / 2);
		--ez-respiro: 24px;
		padding: 352px var(--ez-respiro) 40px;
		margin-inline: calc(var(--ez-respiro) * -1);
		scroll-padding-inline: var(--ez-respiro);
	}

	.ez-linha--homebrew .ez-card__media {
		margin-top: -352px;
	}

	.ez-linha--homebrew .ez-card__media img {
		max-height: 395px;
	}
}

@media (max-width: 640px) {
	.ez-linha--homebrew .ez-carousel__track {
		grid-auto-columns: 84%;
		--ez-respiro: 20px;
		padding: 300px var(--ez-respiro) 36px;
		margin-inline: calc(var(--ez-respiro) * -1);
		scroll-padding-inline: var(--ez-respiro);
	}

	.ez-linha--homebrew .ez-card__media {
		margin-top: -300px;
		/* No celular o cartao ocupa 84% da tela: a foto ja tem largura de
		   sobra e nao precisa invadir as laterais. */
		margin-inline: -30px;
	}

	.ez-linha--homebrew .ez-card__media img {
		max-height: 340px;
	}

	.ez-linha--homebrew .ez-card {
		padding: 0 22px 22px;
	}
}

/* =============================================================================
 * 9c. LINHA PRO — desenho proprio
 *
 * Segue a referencia: fundo claro com marca d'agua de planta tecnica nas
 * bordas, titulo bicolor, divisor com lupulo, e cartoes centralizados com
 * medalhao de icone. Escopado em .ez-linha--pro.
 * ========================================================================== */
.ez-linha--pro {
	position: relative;
	overflow: hidden;
	padding-block: clamp(56px, 6vw, 96px);
	background: #F7F6F3;
}

/* --- marca d'agua de planta tecnica ---------------------------------------- */
.ez-pro__planta {
	position: absolute;
	top: 0;
	width: clamp(180px, 22vw, 360px);
	height: 100%;
	pointer-events: none;
	opacity: .5;
	/* Linhas de desenho tecnico montadas em gradientes: cotas horizontais,
	   verticais e duas diagonais. Sem arquivo, sem requisicao. */
	background-image:
		repeating-linear-gradient(0deg,   rgba(26, 43, 59, .07) 0 1px, transparent 1px 78px),
		repeating-linear-gradient(90deg,  rgba(26, 43, 59, .07) 0 1px, transparent 1px 96px),
		repeating-linear-gradient(0deg,   rgba(26, 43, 59, .05) 0 1px, transparent 1px 26px),
		repeating-linear-gradient(45deg,  rgba(26, 43, 59, .04) 0 1px, transparent 1px 140px);
}

.ez-pro__planta--esq {
	left: 0;
	mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 100%);
}

.ez-pro__planta--dir {
	right: 0;
	mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 100%);
	-webkit-mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 100%);
}

.ez-linha--pro .ez-wrap {
	position: relative;
	z-index: 1;
}

/* --- cabecalho ------------------------------------------------------------- */
.ez-linha--pro .ez-eyebrow,
.ez-linha--pro2 .ez-eyebrow {
	font-size: 14px;
	letter-spacing: .22em;
}

.ez-linha--pro .ez-titulo-display,
.ez-linha--pro2 .ez-titulo-display {
	margin-top: 12px;
	font-family: var(--ez-exo);
	font-size: clamp(34px, 5vw, 68px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.015em;
	color: var(--ez-azul-cartao);
}

.ez-linha--pro .ez-titulo-display span,
.ez-linha--pro2 .ez-titulo-display span {
	color: var(--ez-cobre-3);   /* o cobre mais quente da marca */
}

/* Divisor: filete, lupulo, filete. */
.ez-pro__divisor {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 18px;
}

.ez-pro__divisor i {
	width: clamp(40px, 7vw, 96px);
	height: 1px;
	background: var(--ez-cobre-3);
	opacity: .55;
}

/* O SVG do cliente entra como mascara: assim ele assume o cobre da marca em
   vez do preto gravado no arquivo, e continua vetorial em qualquer tela.
   Sem borda: nada de circulo em volta. */
.ez-pro__lupulo {
	display: block;
	width: 40px;
	height: 40px;
	background: var(--ez-cobre-3);
	mask: var(--ez-icone) no-repeat center / contain;
	-webkit-mask: var(--ez-icone) no-repeat center / contain;
}

.ez-linha--pro .ez-subtexto,
.ez-linha--pro2 .ez-subtexto {
	max-width: 40ch;
	margin-top: 18px;
	font-family: var(--ez-exo);
	font-size: clamp(15px, 1.35vw, 19px);
	line-height: 1.5;
	color: var(--ez-azul-cartao);
}

/* --- faixa: tres por vez, com respiro para a arte e para a sombra ---------- */
.ez-linha--pro .ez-carousel {
	margin-top: 30px;
}

.ez-linha--pro .ez-carousel__track {
	grid-auto-columns: calc((100% - var(--ez-gap) * 2) / 3);
	--ez-respiro: 30px;
	padding: 150px var(--ez-respiro) 46px;
	margin-inline: calc(var(--ez-respiro) * -1);
	scroll-padding-inline: var(--ez-respiro);
}

/* --- o cartao -------------------------------------------------------------- */
.ez-card--pro {
	align-items: center;
	padding: 0 26px 26px;
	border: 0;
	border-radius: 20px;
	background: var(--ez-azul-cartao);
	text-align: center;
	box-shadow: 0 14px 30px rgba(16, 30, 44, .16);
}

.ez-card--pro:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 54px rgba(16, 30, 44, .22);
}

.ez-card--pro .ez-card__media {
	width: 100%;
	margin-top: -150px;
	margin-bottom: 20px;
	height: auto;
	align-items: flex-end;
}

.ez-card--pro .ez-card__media img {
	max-width: 100%;
	max-height: 340px;
	filter: drop-shadow(0 16px 22px rgba(16, 30, 44, .30));
}

/* Medalhao redondo com o icone */
.ez-card__medalhao {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin-bottom: 16px;
	/* 1.5px: com 1px o anel quase sumia ao lado do traco de 2.2 do icone. */
	border: 1.5px solid rgba(202, 116, 65, .55);
	border-radius: 50%;
	color: var(--ez-cobre-texto);
}

.ez-card__medalhao svg {
	/* 34px: o desenho foi refeito para este tamanho — ver ezbrew_home_icone(),
	   onde a espessura do traco e a distancia minima entre eles saem daqui. */
	width: 34px;
	height: 34px;
}

.ez-card--pro .ez-card__title {
	font-family: var(--ez-exo);
	font-size: clamp(17px, 1.4vw, 21px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #FFFFFF;
}

/* Filete curto sob o titulo */
.ez-card__filete {
	display: block;
	width: 54px;
	height: 2px;
	margin: 14px auto 0;
	background: var(--ez-cobre);
}

.ez-card--pro .ez-card__text {
	flex: 1 1 auto;
	margin-top: 16px;
	font-family: var(--ez-exo);
	font-size: 15px;
	line-height: 1.8;
	color: rgba(255, 255, 255, .9);
}

.ez-card--pro .ez-card__cta {
	margin-top: 22px;
	padding: 14px 20px;
	border-radius: 6px;
	background: var(--ez-cobre);
	font-family: var(--ez-exo);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
}

.ez-card--pro .ez-card__cta:hover {
	background: #B05F31;
}

/* --- setas e pontos: circulo azul com chevron cobre ------------------------ */

/* Fora dos cartoes: circulo azul sobre cartao azul desaparecia. */
.ez-linha--pro .ez-carousel__nav--prev { left: -76px; }
.ez-linha--pro .ez-carousel__nav--next { right: -76px; }

.ez-linha--pro .ez-carousel__dots {
	margin-top: 10px;
	gap: 12px;
}

.ez-linha--pro .ez-carousel__dot {
	width: 9px;
	height: 9px;
	background: rgba(26, 43, 59, .22);
}

.ez-linha--pro .ez-carousel__dot.is-active {
	width: 11px;
	height: 11px;
	background: var(--ez-cobre);
}

/* --- responsivo ------------------------------------------------------------ */
@media (max-width: 1320px) {
	/* Sem espaco fora da caixa: as setas voltam para dentro, mas com um anel
	   claro para nao sumirem contra o cartao. */
	.ez-linha--pro .ez-carousel__nav--prev { left: -12px; }
	.ez-linha--pro .ez-carousel__nav--next { right: -12px; }

	.ez-linha--pro .ez-carousel__nav {
		border: 3px solid #F7F6F3;
	}
}

@media (max-width: 900px) {
	.ez-linha--pro .ez-carousel__track {
		grid-auto-columns: calc((100% - var(--ez-gap)) / 2);
		padding: 118px 24px 40px;
		margin-inline: -24px;
		scroll-padding-inline: 24px;
	}

	.ez-card--pro .ez-card__media { margin-top: -118px; }
	.ez-card--pro .ez-card__media img { max-height: 270px; }
	.ez-pro__planta { display: none; }
}

@media (max-width: 640px) {
	.ez-linha--pro .ez-carousel__track {
		grid-auto-columns: 84%;
		padding: 106px 20px 36px;
		margin-inline: -20px;
		scroll-padding-inline: 20px;
	}

	.ez-card--pro .ez-card__media { margin-top: -106px; }
	.ez-card--pro { padding: 0 20px 22px; }
}

/* =============================================================================
 * 9d. LINHA PRO — SEGUNDA PROPOSTA
 *
 * Cartoes deitados, dois por linha: a arte sai pela esquerda e ultrapassa o
 * topo e a base do cartao; o texto fica a direita, com o chevron no canto.
 * Convive com a secao 9c para o cliente comparar os dois desenhos.
 * ========================================================================== */
.ez-linha--pro2 {
	padding-block: 70px 80px;
	background: var(--ez-areia);
}

.ez-pro2__olho {
	margin: 0;
	font-family: var(--ez-exo);
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	color: #4A5666;
}

.ez-pro2__titulo {
	margin: 4px 0 0;
	font-family: var(--ez-exo);
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: 800;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
	color: var(--ez-cobre-texto);
}

/* --- a faixa ---------------------------------------------------------------
   Uma linha so, rolando na horizontal. Dois cartoes por vez e o terceiro
   assomando: e o que comunica que a faixa continua.
   O respiro superior e inferior e onde a arte transborda; o lateral e por onde
   ela avanca para fora da borda esquerda do cartao. */
.ez-linha--pro2 .ez-carousel {
	margin-top: 58px;
}

.ez-linha--pro2 .ez-carousel__track {
	/* A arte avanca para fora do cartao e a sombra dela alcanca mais 11px.
	   Com a arte maior o avanco a esquerda cresceu, entao o respiro
	   acompanhou: a faixa de rolagem corta tudo que passa da borda, e o
	   primeiro cartao era o que aparecia mutilado.
	   Em baixo o calculo e outro: arte + 29px de sombra (o desvio de 18px
	   soma ao raio de 11), dai o rodape maior. */
	--ez-respiro: 92px;
	--ez-fade: 20px;

	/* A arte avanca ~95px para a ESQUERDA do cartao e nada para a direita,
	   entao o respiro e assimetrico: 118px de um lado, 92px do outro. Com o
	   mesmo valor dos dois lados, ou o primeiro cartao saia cortado ou
	   sobrava um vao inutil a direita. */
	--ez-respiro-esq: 118px;

	/* DOIS CARTOES POR TELA, inteiros — nao 2,2.
	   A arte avanca para a esquerda do cartao, e antes esse avanco caia em
	   cima do cartao anterior: o vao era de 30px e o avanco passava de
	   100px. Agora o vao e de 72px e o avanco ficou em ~12% da coluna da
	   arte, sempre menor que ele. Mostrar cartoes inteiros tambem evita o
	   terceiro espiando pela borda, que era parte da confusao. */
	grid-auto-columns: calc((100% - 112px) / 2);
	gap: 112px;
	padding: 62px var(--ez-respiro) 84px var(--ez-respiro-esq);
	margin-left: calc(var(--ez-respiro-esq) * -1);
	margin-right: calc(var(--ez-respiro) * -1);
	scroll-padding-left: var(--ez-respiro-esq);
	scroll-padding-right: var(--ez-respiro);
	/* Um por vez: o encaixe e firme, nunca para no meio de dois. */
	scroll-snap-type: x mandatory;
}

/* --- o cartao --- */
.ez-pro2__card {
	position: relative;
	display: grid;
	/* Coluna da arte bem mais larga: o equipamento e o assunto do cartao.
	   Proporcional, nao fixa: numa largura de cartao menor uma coluna de
	   300px comia o espaco do texto e as frases quebravam em cascata. */
	grid-template-columns: minmax(150px, 40%) minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	min-height: 210px;
	padding: 24px 26px 24px 0;
	border-radius: 12px;
	background: var(--ez-azul-cartao);
	box-shadow: 0 14px 32px rgba(16, 30, 44, .18);
	transition: transform .22s ease, box-shadow .22s ease;
}

.ez-pro2__card:hover,
.ez-pro2__card:focus-within {
	box-shadow: 0 22px 46px rgba(16, 30, 44, .28);
}

/* A arte rompe as tres bordas: esquerda, topo e base. O grid nao recorta, e a
   secao tem folga suficiente em volta. */
/* O transbordo lateral fica menor que o vao da grade (30px), para a arte de um
   cartao nunca alcancar o de baixo nem o do lado. */
.ez-pro2__arte {
	display: grid;
	place-items: center;
	/* Pouco avanco a esquerda: a arte cresce, mas fica mais dentro do
	   cartao. Com -48px a do PRIMEIRO cartao passava da borda da faixa e o
	   container de rolagem cortava. */
	margin: -70px 0 -70px -10px;

	/* O excedente vai todo para a esquerda. Centralizada, a arte crescia
	   para os dois lados e passava por cima do texto. */
	justify-items: end;
}

/* A arte cresce para fora da coluna, nao dentro dela.
   Aumentar a coluna faria o texto encolher junto; deixar a imagem passar de
   130% da coluna joga o excedente para a esquerda, que e area livre da
   secao — o texto fica do mesmo tamanho e o equipamento cresce. */
.ez-pro2__arte img {
	/* 145%: quem manda no tamanho aqui e a LARGURA, nao o max-height.
	   Os produtos altos (Fase Fria, Tanques) batem no max-height e nao
	   mudam; os deitados (Fase Quente, Filtragem) so cresciam se a largura
	   crescesse — era por isso que apareciam menores que os vizinhos.
	   O excedente (45% da coluna) continua menor que o vao entre cartoes. */
	width: 145%;
	max-width: none;
	max-height: 420px;
	filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .34));
	transition: transform .3s ease;
}

.ez-pro2__card:hover .ez-pro2__arte img {
	transform: scale(1.04);
}

.ez-pro2__texto {
	text-align: center;
}

.ez-pro2__nome {
	margin: 0;
	font-family: var(--ez-exo);
	font-size: clamp(20px, 2vw, 27px);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ez-dourado);
}

.ez-pro2__card p {
	margin: 10px 0 0;
	font-family: var(--ez-exo);
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .82);
}

.ez-pro2__cta {
	display: inline-block;
	width: auto;
	margin-top: 16px;
	padding: 10px 20px;
	border-radius: 6px;
	background: var(--ez-cobre);
	font-family: var(--ez-exo);
	font-size: 14px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

.ez-pro2__cta:hover,
.ez-pro2__cta:focus-visible {
	background: #B4652F;
}

/* Setas da faixa, sobre o fundo areia */
.ez-linha--pro2 .ez-carousel__nav--prev { left: -20px; }
.ez-linha--pro2 .ez-carousel__nav--next { right: -20px; }

@media (max-width: 1240px) {
	.ez-linha--pro2 .ez-carousel__nav--prev { left: 4px; }
	.ez-linha--pro2 .ez-carousel__nav--next { right: 4px; }
}

@media (max-width: 1024px) {
	.ez-pro2__card {
		grid-template-columns: minmax(160px, 40%) minmax(0, 1fr);
	}

	.ez-pro2__arte img {
		max-height: 300px;
	}
}

@media (max-width: 860px) {
	/* Um cartao por vez, com o seguinte assomando. */
	.ez-linha--pro2 .ez-carousel__track {
		grid-auto-columns: 100%;
	}

	.ez-pro2__card {
		grid-template-columns: minmax(170px, 42%) minmax(0, 1fr);
	}

	.ez-pro2__arte img {
		max-height: 330px;
	}
}

@media (max-width: 620px) {
	/* Empilhado: a arte volta para dentro e ocupa o topo do cartao. */
	.ez-pro2__card {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
		padding: 22px 22px 26px;
	}

	.ez-pro2__arte {
		margin: -78px 0 0;
		/* Empilhado nao ha coluna para transbordar: a arte volta a se
		   centralizar e a caber no cartao. Sem isto o width:150% do desktop
		   continuava valendo e a foto saia pela lateral. */
		justify-items: center;
	}

	.ez-pro2__arte img {
		width: auto;
		max-width: 100%;
		max-height: 260px;
	}

	.ez-linha--pro2 .ez-carousel__track {
		--ez-respiro: 24px;

		grid-auto-columns: 84%;
		padding: 62px var(--ez-respiro) 40px;
	}
}

/* =============================================================================
 * 10. MANIFESTO
 * ========================================================================== */
.ez-manifesto {
	padding: 60px 0 80px;
}

.ez-manifesto .ez-painel {
	text-align: center;
}

/* PLANTA TECNICA (sessao-tres.webp)
 *
 * A arte e 2064x762 (2,7:1) e o painel fica perto de 1,8:1, entao usar a
 * imagem inteira como fundo obrigava a escolher entre esticar 1,5x na vertical
 * (o fermentador espremido) ou cortar as laterais (perder justamente as duas
 * maquinas). Medindo a imagem, o desenho ocupa so 0-25% e 76-100% da largura:
 * o miolo e brilho de fundo.
 *
 * Entao o miolo virou gradiente (cores amostradas da propria arte) e cada
 * maquina entra numa camada propria, ancorada na sua borda e escalada pela
 * ALTURA do painel. O aspect-ratio de cada camada e o do recorte, entao a
 * largura acompanha a altura e a proporcao nunca se perde. A mascara dissolve
 * a emenda no gradiente. */
.ez-manifesto__painel {
	position: relative;
	overflow: hidden;
	padding: 56px 40px 60px;
	background:
		radial-gradient(120% 130% at 50% 46%, #2B496D 0%, #17304C 42%, #0A1B31 74%, #030F22 100%)
		var(--ez-azul-cartao);
}

.ez-manifesto__painel::before,
.ez-manifesto__painel::after {
	content: "";
	position: absolute;
	top: 0;
	height: 100%;
	background-image: var(--ez-planta);
	background-repeat: no-repeat;
	background-size: auto 100%;
	/* Em escala real a planta fica nitida demais e briga com o texto. Ela e so
	   ambiente: 0.32 mantem o desenho legivel sem disputar com o texto branco
	   que passa por cima. */
	opacity: .32;
	pointer-events: none;
}

/* Fermentador: recorte 0-520px dos 2064 originais */
.ez-manifesto__painel::before {
	left: 0;
	aspect-ratio: 520 / 762;
	background-position: left center;
	-webkit-mask-image: linear-gradient(to right, #000 0 62%, transparent 100%);
	mask-image: linear-gradient(to right, #000 0 62%, transparent 100%);
}

/* Tubulacao e manometro: recorte 1420-2064px */
.ez-manifesto__painel::after {
	right: 0;
	aspect-ratio: 644 / 762;
	background-position: right center;
	-webkit-mask-image: linear-gradient(to left, #000 0 62%, transparent 100%);
	mask-image: linear-gradient(to left, #000 0 62%, transparent 100%);
}

/* O filete dourado estava desenhado na imagem e se perdeu ao fatiar; aqui ele
   e um retangulo com borda que some para cima, como no original. */
.ez-manifesto__filete {
	position: absolute;
	inset: 30px 34px 26px;
	border: 1px solid rgba(213, 186, 131, .42);
	border-radius: 16px;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to top, #000 0 40%, transparent 82%);
	mask-image: linear-gradient(to top, #000 0 40%, transparent 82%);
}

/* Em telas estreitas o painel fica alto: escaladas pela altura, as maquinas
   ficariam maiores que o painel inteiro. Fica so o fermentador, menor e
   apoiado no rodape. */
@media (max-width: 899px) {
	.ez-manifesto__painel::before {
		top: auto;
		bottom: 0;
		height: 38%;
		opacity: .3;
	}

	.ez-manifesto__painel::after {
		display: none;
	}
}

@media (min-width: 900px) {
	.ez-home {
		--ez-planta: var(--ez-planta-g);
	}

	.ez-manifesto__painel {
		padding: 70px 60px 74px;
	}
}

/* O conteudo precisa passar por cima das camadas de fundo */
.ez-manifesto__painel > *:not(.ez-manifesto__filete) {
	position: relative;
	z-index: 1;
}

/* Olho entre dois filetes dourados */
.ez-manifesto__olho {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	color: var(--ez-dourado);
}

.ez-manifesto__olho i {
	width: clamp(24px, 4vw, 56px);
	height: 1px;
	background: currentColor;
	opacity: .6;
}

/* Abaixo de 600px o texto do olho ja quebra em duas linhas e os filetes ficam
   pendurados na lateral do bloco. Melhor tirar. */
@media (max-width: 599px) {
	.ez-manifesto__olho i {
		display: none;
	}
}

/* Mesmo divisor da Linha Pro, com filetes longos e o lupulo em dourado */
.ez-manifesto__divisor {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin: 26px 0 34px;
}

.ez-manifesto__divisor i {
	width: clamp(60px, 18vw, 280px);
	height: 1px;
	background: var(--ez-dourado);
	opacity: .5;
}

.ez-pro__lupulo--dourado {
	background: var(--ez-dourado);
}

.ez-manifesto p {
	max-width: 52ch;
	margin-inline: auto;
	font-family: var(--ez-exo);
	font-size: 23px;
	font-weight: 400;
	line-height: 1.5;
	color: #FFFFFF;
}

.ez-manifesto p b {
	font-weight: 700;
}

.ez-manifesto p:last-of-type {
	margin-bottom: 0;
}

.ez-manifesto .ez-btn--dourado {
	margin-top: 40px;
}

/* =============================================================================
 * 11. JORNADA DA PRODUCAO — as quatro fases em abas
 *
 * Antes cada fase era uma secao inteira, com paleta propria (duas azuis, duas
 * areia) e entalhe em seta no topo. Viraram uma secao so, creme, com a trilha
 * numerada em cima: um painel por vez. A pagina encurtou muito e a comparacao
 * entre as fases passou a ser um clique em vez de uma rolagem.
 * ========================================================================== */
.ez-jornada {
	position: relative;
	overflow: hidden;
	padding: 76px 0 90px;
	background: var(--ez-creme);
}

/* Mesma arte do manifesto (ja em cache), invertida: os tracos claros sobre
   azul viram tracos cinza sobre creme, como no desenho.
   Nada de 'mix-blend-mode: multiply' aqui: a .ez-wrap tem z-index 1 e cria um
   contexto de empilhamento, o que quebra o grupo de mesclagem e recortava a
   planta num retangulo bege exatamente do tamanho dela. Nao faz falta — o
   canto escuro da arte inverte para #F6F6F6, praticamente o proprio creme da
   secao, entao a 0.5 de opacidade so as linhas aparecem. */
.ez-jornada__planta {
	position: absolute;
	top: 0;
	height: clamp(180px, 26vw, 340px);
	background-image: var(--ez-planta);
	background-repeat: no-repeat;
	background-size: auto 100%;
	filter: invert(1) grayscale(1);
	opacity: .5;
	pointer-events: none;
}

.ez-jornada__planta--esq {
	left: 0;
	aspect-ratio: 520 / 762;
	background-position: left center;
	-webkit-mask-image: linear-gradient(to bottom right, #000 0 40%, transparent 90%);
	mask-image: linear-gradient(to bottom right, #000 0 40%, transparent 90%);
}

.ez-jornada__planta--dir {
	right: 0;
	aspect-ratio: 644 / 762;
	background-position: right center;
	-webkit-mask-image: linear-gradient(to bottom left, #000 0 40%, transparent 90%);
	mask-image: linear-gradient(to bottom left, #000 0 40%, transparent 90%);
}

.ez-jornada .ez-wrap {
	position: relative;
	z-index: 1;
}

.ez-jornada__titulo {
	margin: 10px 0 0;
	font-family: var(--ez-exo);
	font-size: clamp(28px, 3.9vw, 54px);
	font-weight: 800;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
	color: var(--ez-azul);
}

.ez-jornada > .ez-wrap > .ez-subtexto {
	max-width: 62ch;
	color: #3C4A5A;
}

/* --- Trilha numerada --------------------------------------------------- */
.ez-trilha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-top: 42px;
}

.ez-trilha__passo {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: #9A988F;
	transition: color .18s ease;
}

/* O filete que liga um passo ao seguinte. Fica dentro do link, depois do
   rotulo — por isso o ultimo passo nao tem. */
.ez-trilha__passo:not(:last-child)::after {
	content: "";
	width: clamp(20px, 4.5vw, 78px);
	height: 1px;
	margin: 0 18px;
	background: #D3D1CA;
}

.ez-trilha__numero {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	border: 1.5px solid #CFCDC6;
	border-radius: 50%;
	font-family: var(--ez-grotesk);
	font-size: 16px;
	font-weight: 500;
	color: inherit;
	transition: border-color .18s ease, color .18s ease;
}

.ez-trilha__nome {
	font-family: var(--ez-grotesk);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ez-trilha__passo:hover,
.ez-trilha__passo:focus-visible {
	color: var(--ez-azul);
}

.ez-trilha__passo:hover .ez-trilha__numero,
.ez-trilha__passo:focus-visible .ez-trilha__numero {
	border-color: var(--ez-cobre-texto);
}

.ez-trilha__passo.is-active {
	color: var(--ez-azul);
}

.ez-trilha__passo.is-active .ez-trilha__numero {
	border-color: var(--ez-cobre-texto);
	border-width: 2px;
	color: var(--ez-cobre-texto);
}

.ez-trilha__passo.is-active .ez-trilha__nome {
	font-weight: 700;
}

/* --- Painel da fase ---------------------------------------------------- */
.ez-fase {
	padding-top: 54px;
}

.ez-fase .ez-eyebrow {
	font-size: 15px;
	letter-spacing: 2.2px;
	color: var(--ez-cobre-texto);
}

.ez-fase .ez-titulo-secao {
	margin-top: 10px;
	font-family: var(--ez-diavlo);
	font-size: clamp(26px, 3vw, 40px);
	color: var(--ez-azul);
}

.ez-fase .ez-subtexto--esquerda {
	margin-top: 14px;
	font-size: 17px;
	line-height: 1.6;
	color: #4A5666;
}

.ez-fase .ez-grade,
.ez-fase .ez-carousel {
	margin-top: 40px;
}

.ez-fase .ez-carousel__track {
	grid-auto-columns: calc((100% - var(--ez-gap) * 2) / 3);
}

/* Cartao branco do desenho: sem borda, canto suave e sombra leve. */
.ez-fase .ez-card {
	padding: 26px 30px 28px;
	background: #FFFFFF;
	border: 0;
	border-radius: 14px;
	box-shadow: 0 2px 16px rgba(32, 57, 84, .07);
}

.ez-fase .ez-card:hover {
	box-shadow: 0 14px 32px rgba(32, 57, 84, .13);
}

/* Caixa de midia com altura fixa: os arquivos tem alturas muito diferentes
   (o filtro automatizado e bem mais baixo que os de coluna) e sem isso os
   titulos e os botoes dos tres cartoes saiam desencontrados. */
.ez-fase .ez-card__media {
	/* A altura vai numa variavel porque o 'max-height: 100%' da imagem nao
	   resolve aqui: a linha do grid tem tamanho automatico, o percentual fica
	   circular e o navegador o ignora — a arte transbordava por cima do
	   titulo. Com o mesmo valor definido nos dois, ela sempre cabe. */
	--ez-media-h: clamp(170px, 16vw, 226px);
	height: var(--ez-media-h);
	margin-bottom: 22px;
}

.ez-fase .ez-card__media img {
	max-height: var(--ez-media-h);
	object-fit: contain;
}

.ez-fase .ez-card__title {
	font-size: 19px;
	color: var(--ez-cobre-texto);
}

.ez-fase .ez-card__text {
	color: #5A6675;
}

.ez-fase .ez-card__text b {
	display: inline-block;
	margin-bottom: 4px;
	color: var(--ez-azul);
}

.ez-fase .ez-card__cta {
	border-radius: 4px;
	letter-spacing: .04em;
}

/* Setas e pontos do carrossel da fase agora vivem sobre o creme */
.ez-fase .ez-carousel__dot {
	background: #CFCDC6;
}

.ez-fase .ez-carousel__dot.is-active {
	background: var(--ez-cobre);
}

@media (max-width: 899px) {
	.ez-jornada {
		padding: 48px 0 60px;
	}

	.ez-jornada > .ez-wrap > .ez-subtexto {
		font-size: 17px;
	}

	/* A trilha vira uma faixa rolavel: os passos nao cabem em 390px, e quebrar
	   em duas linhas partia os filetes no meio. A mascara esmaece as pontas
	   para deixar claro que ha mais passos de lado, e o snap encaixa cada
	   passo no lugar. */
	.ez-trilha {
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin-top: 30px;
		padding-inline: 20px;
		margin-inline: -20px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 26px), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 26px), transparent 100%);
	}

	.ez-trilha::-webkit-scrollbar {
		display: none;
	}

	.ez-trilha__passo {
		flex: 0 0 auto;
		scroll-snap-align: center;
	}

	.ez-trilha__passo:not(:last-child)::after {
		margin: 0 12px;
	}

	/* Alvo de toque confortavel sem engordar o circulo */
	.ez-trilha__passo {
		padding-block: 6px;
	}

	.ez-fase {
		padding-top: 34px;
	}

	.ez-fase .ez-grade,
	.ez-fase .ez-carousel {
		margin-top: 28px;
	}

	.ez-fase .ez-titulo-secao {
		font-size: clamp(23px, 6.4vw, 30px);
	}

	.ez-jornada__planta {
		opacity: .3;
	}
}

/* =============================================================================
 * 12. PROJETOS INDUSTRIAIS
 * ========================================================================== */
.ez-industrial {
	position: relative;
	padding: 10vw 0;
	isolation: isolate;
	color: #FFFFFF;
	background: var(--ez-preto);
}

.ez-industrial__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

/* Como no original: a foto entra em tamanho natural (sem cover), ancorada a
   esquerda e centralizada na vertical, sobre o preto da secao. */
.ez-industrial__bg img {
	width: 100%;
	height: 100%;
	object-fit: none;
	object-position: 0 50%;
}

/* Degrade da propria secao no original: quase transparente no topo e preto
   solido a 79% da diagonal. E o que deixa o texto legivel sobre a foto. */
.ez-industrial__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(156deg, rgba(0, 0, 0, .08) 0%, rgb(0, 0, 0) 79%);
}

.ez-industrial__inner {
	display: grid;
	grid-template-columns: 48% 52%;
	gap: 20px;
	align-items: center;
	max-width: 1240px;
}

/* No original e um carrossel de 258x346 que sangra para fora da coluna: a
   primeira imagem entra cortada pela borda esquerda da tela e a ultima e
   cortada pela coluna de texto. A faixa abaixo reproduz esse enquadramento
   sem depender de JS. */
/* overflow-x auto, e nao hidden: antes as fotos que passavam da largura eram
   simplesmente inalcancaveis no desktop. Agora a faixa rola — e o arrasto com
   o mouse vem do mesmo JS dos carrosseis. */
.ez-industrial__galeria {
	display: flex;
	gap: 20px;
	margin-left: -183px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.ez-industrial__galeria::-webkit-scrollbar {
	display: none;
}

.ez-industrial__galeria img {
	flex: none;
	width: 258px;
	aspect-ratio: 89 / 119;
	object-fit: cover;
	/* Cantos arredondados, como na /modelo/. */
	border-radius: 14px;
}

/* A galeria anda sozinha. Enquanto o mouse esta em cima, ou o dedo
   arrastando, ela para — quem esta olhando uma foto nao quer que ela fuja.
   Tambem respeita quem pediu menos animacao no sistema. */
.ez-industrial__galeria.is-arrastando {
	cursor: grabbing;
}

@media (prefers-reduced-motion: reduce) {
	.ez-industrial__galeria {
		scroll-behavior: auto;
	}
}

.ez-industrial__texto h2 {
	margin: 0 0 18px;
	font-family: var(--ez-exo);
	font-size: 38px;
	font-weight: 600;
	line-height: 1.2;
	color: #FFFFFF;
}

.ez-industrial__texto p {
	font-family: var(--ez-exo);
	font-size: 16px;
	line-height: 1.7;
	color: #FFFFFF;
}

/* =============================================================================
 * 13. BLOG
 *
 * Mesma linguagem das outras secoes: fundo creme, cartao branco com canto de
 * 14px e sombra leve, titulo display em azul. Antes a secao era branca com
 * cartao de borda cinza e canto reto, e destoava de tudo em volta.
 * ========================================================================== */
.ez-blog {
	padding: 70px 0 84px;
	background: var(--ez-creme);
}

.ez-blog__titulo {
	margin: 10px 0 0;
	font-family: var(--ez-exo);
	font-size: clamp(26px, 3.4vw, 46px);
	font-weight: 800;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
	color: var(--ez-azul);
}

.ez-blog .ez-subtexto {
	max-width: 58ch;
	font-family: var(--ez-inter);
	font-size: 18px;
	line-height: 1.6;
	color: #4A5666;
}

.ez-blog .ez-grade {
	margin-top: 46px;
}

.ez-post {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: #FFFFFF;
	border: 0;
	border-radius: 14px;
	box-shadow: 0 2px 16px rgba(32, 57, 84, .07);
	transition: transform .2s ease, box-shadow .2s ease;
}

.ez-post:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(32, 57, 84, .16);
}

.ez-post__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--ez-areia);
}

.ez-post__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.ez-post:hover .ez-post__thumb img {
	transform: scale(1.05);
}

.ez-post__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 22px 22px 24px;
}

/* Chapeu: categoria e data. A data saiu do rodape do cartao — la embaixo ela
   empurrava o "Leia mais" e ficava desalinhada de um cartao para o outro. */
.ez-post__meta {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 10px;
	font-family: var(--ez-grotesk);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8C8A83;
}

.ez-post__cat {
	color: var(--ez-cobre-texto);
}

/* O ponto separador so existe quando ha categoria antes da data */
.ez-post__cat + time::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-right: 9px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
}

.ez-post__title {
	margin: 0;
	font-family: var(--ez-exo);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.32;
}

.ez-post__title a {
	color: var(--ez-azul);
	text-decoration: none;
	transition: color .18s ease;
}

/* Estica o link do titulo por cima do cartao inteiro: a capa e o "Leia mais"
   viram enfeite e o leitor de tela anuncia um unico link em vez de tres para
   o mesmo destino. */
.ez-post__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ez-post:hover .ez-post__title a {
	color: var(--ez-cobre-texto);
}

/* Tres linhas em todos os cartoes: sem isso o resumo mais curto encolhia o
   cartao e o "Leia mais" subia, um em cada altura. */
.ez-post__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 10px 0 0;
	font-family: var(--ez-exo);
	font-size: 15px;
	line-height: 1.6;
	color: #5A6675;
}

.ez-post__mais {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	padding-top: 18px;
	font-family: var(--ez-grotesk);
	font-size: 14px;
	font-weight: 600;
	color: var(--ez-cobre-texto);
}

.ez-post__mais svg {
	width: 15px;
	height: 15px;
	transition: transform .2s ease;
}

.ez-post:hover .ez-post__mais svg {
	transform: translateX(3px);
}

/* Botao de contorno: chamada secundaria, nao compete com os CTAs de produto */
.ez-btn--contorno {
	display: inline-block;
	width: auto;
	padding: 14px 34px;
	border: 1.5px solid rgba(32, 57, 84, .3);
	border-radius: 6px;
	background: transparent;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--ez-azul);
}

.ez-btn--contorno:hover,
.ez-btn--contorno:focus-visible {
	border-color: var(--ez-azul);
	background: var(--ez-azul);
	color: #FFFFFF;
}

.ez-blog__todos {
	display: table;
	margin: 46px auto 0;
}

@media (max-width: 899px) {
	.ez-blog {
		padding: 50px 0 60px;
	}

	.ez-blog .ez-grade {
		margin-top: 30px;
	}

	.ez-blog__todos {
		margin-top: 32px;
	}
}

/* =============================================================================
 * 14. LOJA
 * ========================================================================== */
.ez-loja {
	position: relative;
	min-height: 335px;
	display: grid;
	place-items: center;
	padding-block: 60px;
	isolation: isolate;
	text-align: center;
	color: #FFFFFF;
	background: #1D1816;
}

.ez-loja__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.ez-loja__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ez-loja__inner h2 {
	margin: 0;
	font-family: var(--ez-exo);
	font-size: 34px;
	font-weight: 600;
	line-height: 1.25;
	color: #FFFFFF;
}

.ez-loja__inner p {
	margin: 14px auto 24px;
	max-width: 620px;
	font-family: var(--ez-inter);
	font-size: 18px;
	line-height: 1.6;
	color: #FFFFFF;
}

/* =============================================================================
 * 15. DEPOIMENTOS E CONTATO
 * ========================================================================== */
.ez-depoimentos {
	padding-block: clamp(40px, 4.4vw, 62px);
	background: var(--ez-areia);
}

.ez-dep__topo {
	display: grid;
	justify-items: center;
	gap: 8px;
	margin-bottom: 28px;
	text-align: center;
}

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

.ez-dep__titulo {
	font-size: clamp(24px, 2.4vw, 31px);
	font-weight: 600;
	color: var(--ez-azul-cartao);
}

.ez-dep__nota {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 4px;
}

.ez-dep__nota strong {
	font-size: 26px;
	color: var(--ez-azul-cartao);
}

.ez-dep__nota small a,
.ez-dep__nota small {
	color: var(--ez-preto-texto);
	font-size: 14px;
	opacity: .78;
}

.ez-dep__estrelas {
	display: inline-flex;
	gap: 2px;
	margin: 0;
}

/*
 * A estrela é SVG e não caractere: "★" muda de desenho e de largura conforme
 * a fonte instalada, e numa das três fontes do site ela some.
 */
.ez-dep__estrela {
	width: 17px;
	height: 17px;
	fill: #E8A33D;
}

.ez-dep__estrela.is-apagada {
	fill: rgba(16, 30, 44, .18);
}

.ez-depoimentos__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ez-depoimento {
	display: grid;
	gap: 12px;
	align-content: start;
	padding: 22px;
	border-radius: 14px;
	background: #FFFFFF;
	box-shadow: 0 4px 20px rgba(26, 43, 59, .07);
}

.ez-depoimento blockquote {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--ez-preto-texto);
}

.ez-depoimento cite {
	display: flex;
	align-items: center;
	gap: 11px;
	font-style: normal;
}

.ez-depoimento cite strong {
	display: block;
	font-size: 14px;
	color: var(--ez-azul-cartao);
}

.ez-depoimento cite small {
	font-size: 12.5px;
	opacity: .7;
}

/*
 * Inicial no lugar da foto do Google.
 *
 * A foto vem do CDN deles; buscá-la entregaria o visitante a um terceiro sem
 * ele ter pedido — e é justamente o que o aviso de cookies existe para evitar.
 */
.ez-dep__inicial {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 50%;
	background: var(--ez-creme);
	color: var(--ez-cobre-texto);
	font-size: 13px;
	font-weight: 700;
}

.ez-contato {
	padding-block: 50px;
}

/* align-items: center e nao start — a coluna de texto tem 320px e a do
   formulario 730; ancorando as duas no topo sobravam 400px de vazio ao lado do
   texto. Centralizado, o vazio se divide e o bloco fica equilibrado. */
.ez-contato__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.ez-contato .ez-titulo-secao {
	margin-top: 6px;
}

.ez-lista-check {
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.ez-lista-check li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	font-family: var(--ez-exo);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ez-preto);
}

/* Divisor ABAIXO de cada item: 2px, 59% da largura, cinza — como no original,
   onde a linha nao chega ate o fim da coluna. */
.ez-lista-check li::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 59%;
	height: 2px;
	background: #C9C9C9;
}

.ez-lista-check li {
	position: relative;
}

.ez-lista-check svg {
	width: 12px;
	height: 12px;
	flex: none;
	color: var(--ez-cobre-texto);
}

.ez-contato__form {
	padding: 24px;
	border: 1px solid #CFD1CD;
	border-radius: 5px;
	background: var(--ez-areia);
}

/* --- enxugando a altura do formulario -------------------------------------
   O bloco vinha com 790px de altura. Dois culpados, os dois vindos do
   Elementor/MetForm e nenhum ajustavel sem editar o formulario no painel:

   1. o container do formulario tem padding 40/50/50 por DENTRO do cartao, que
      ja tem os seus 24px — eram 90px de altura so de respiro duplicado;
   2. o textarea vem com rows=10, o que da 180px para "conte sobre a producao".

   O !important e necessario: as regras do Elementor sao do tipo
   .elementor-11056 .elementor-element-13f46608 .mf-input, com especificidade
   (0,3,0) — acima de qualquer seletor razoavel escrito aqui. */
.ez-contato__form .elementor > .e-con,
.ez-contato__form .elementor > .elementor-element {
	padding-block: 0 !important;
	padding-inline: 0 !important;
}

.ez-contato__form .mf-textarea {
	height: 104px !important;
	min-height: 0 !important;
}

/* Respiro entre campos um pouco menor, sem encostar rotulo em campo. */
.ez-contato__form .mf-input-wrapper {
	padding-bottom: 10px !important;
}

/* =============================================================================
 * 16. RESPONSIVO
 * ========================================================================== */
@media (max-width: 1220px) {
	.ez-wrap { padding-inline: 20px; }

	.ez-carousel__nav--prev { left: -8px; }
	.ez-carousel__nav--next { right: -8px; }
}

@media (max-width: 1024px) {
	.ez-hero { min-height: 670px; }

	.ez-carousel__track { grid-auto-columns: calc((100% - var(--ez-gap) * 2) / 3); }

	.ez-grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.ez-industrial__inner { grid-template-columns: 1fr; }

	.ez-industrial__galeria {
		margin-left: 0;
	}

	.ez-painel { padding: 30px; }

	.ez-fase .ez-card { padding: 20px 24px; }
}

@media (max-width: 900px) {
	.ez-grade--3       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ez-contato__inner { grid-template-columns: 1fr; }

	/* A arte vai para baixo do texto e a chamada sai da borda da imagem. */
	.ez-promessa__inner { grid-template-columns: 1fr; }

	/* O olho quebra em duas linhas nesta largura, e o filete com os pontinhos
	   ficava pendurado a direita da PRIMEIRA linha, centralizado na vertical —
	   era a maior sensacao de "torto" da secao. Some com eles: sao decoracao
	   que so faz sentido quando o texto cabe numa linha so. */
	.ez-promessa__eyebrow {
		display: block;
	}

	.ez-promessa__risco,
	.ez-promessa__pontos {
		display: none;
	}

	/* O arco decorativo atravessava o tanque e passava por tras da chamada. */
	.ez-promessa__arco {
		display: none;
	}

	.ez-promessa__arte { min-height: 0; }

	/* No celular a chamada vai para baixo da arte, entao o espaco reservado
	   no topo nao serve mais. */
	.ez-promessa__arte--recorte {
		padding-top: 0;
		margin-right: 0;
	}

	.ez-promessa__selos {
		position: static;
		/* O container da arte centraliza os filhos; a chamada precisa voltar
		   a encostar na esquerda quando sai de cima da foto. */
		justify-self: stretch;
		max-width: none;
		/* Respiro de verdade: com 18px a chamada encostava nos pes do
		   equipamento e parecia parte da imagem. */
		margin-top: 28px;
		text-align: left;
	}

	.ez-promessa__selo i { display: none; }

	.ez-promessa__selo span {
		color: #6B6F74;
	}

	.ez-promessa__selo strong,
	.ez-promessa__selo span {
		text-shadow: none;
	}

}

/* Entre 561 e 900px a faixa de numeros nao empilhava nem virava colunas: os
   itens ficavam do tamanho do conteudo e paravam a ~57% da largura, deixando
   um vazio grande a direita logo abaixo de filetes que vao de ponta a ponta.
   Era o unico bloco da secao que nao fechava na regua direita. */
@media (min-width: 561px) and (max-width: 900px) {
	.ez-promessa__numeros {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ez-promessa__numeros li {
		padding: 0 0 0 clamp(16px, 3vw, 28px);
	}

	.ez-promessa__numeros li:first-child {
		padding-left: 0;
	}

	.ez-promessa__rotulo { max-width: none; }
}

@media (max-width: 767px) {
	.ez-hero { min-height: 560px; }

	.ez-hero__eyebrow { font-size: 16px; }
	.ez-hero__title   { font-size: 30px; line-height: 34px; }
	.ez-hero__text    { font-size: 16px; }


	.ez-titulo-display { font-size: 34px; }
	.ez-titulo-display--claro { font-size: 24px; line-height: 1.3em; }
	.ez-titulo-secao   { font-size: 20px; line-height: 1.3em; }
	.ez-subtexto       { font-size: 16px; }
	.ez-manifesto p    { font-size: 18px; }

	.ez-carousel__track { grid-auto-columns: calc((100% - var(--ez-gap)) / 2); }

	.ez-industrial__texto h2 { font-size: 24px; }
}

@media (max-width: 560px) {
	.ez-carousel__track { grid-auto-columns: 86%; }

	/* O separador e o border-top do item seguinte. Com padding so no topo ele
	   colava no rotulo de cima e ficava solto do numero de baixo — o olho lia
	   o filete como sublinhado, nao como divisor. Padding nos dois lados
	   devolve o mesmo ritmo dos diferenciais. */
	.ez-promessa__numeros {
		margin-top: 0;
		border-bottom: 1px solid #DEDBD4;
	}

	.ez-promessa__numeros li {
		flex: 1 1 100%;
		padding: 18px 0;
	}

	.ez-promessa__numeros li + li {
		border-left: 0;
		border-top: 1px solid #DEDBD4;
	}

	.ez-promessa__rotulo { max-width: none; }


	.ez-grade--3,
	.ez-grade--4 { grid-template-columns: 1fr; }

	.ez-carousel__nav { display: none; }

	.ez-card__media { height: 160px; }
}

/* =============================================================================
 * CARTAO INTEIRO CLICAVEL
 *
 * O cartao todo abre o produto — quem olha clica na foto, nao no botao.
 * A area estendida e feita no JS (ezbrew: cartao clicavel), nao aqui: a
 * tecnica usual, um ::after esticado por cima do cartao, e reconhecida pelo
 * elementFromPoint mas NAO entrega o clique ao <a> neste tema. Testado: o
 * alvo do clique saia como o <article>, e o link nao abria.
 * ========================================================================== */

.ez-card {
	position: relative;
}

/* Sinaliza que o cartao inteiro responde. */
.ez-card[data-ez-clicavel] {
	cursor: pointer;
}

.ez-card[data-ez-clicavel]:hover .ez-card__cta {
	background: var(--ez-cobre);
	color: #fff;
}

/* =============================================================================
 * BLOG DA TELA INICIAL — CARROSSEL
 *
 * Era uma grade de tres. Virou carrossel com as mesmas tres colunas a vista,
 * para dar acesso aos artigos seguintes sem alongar a secao.
 * ========================================================================== */

.ez-carousel--blog .ez-carousel__track {
	--ez-respiro: 4px;
	--ez-fade: 0px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - var(--ez-gap) * 2) / 3);
	gap: var(--ez-gap);
	padding: 4px var(--ez-respiro) 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.ez-carousel--blog .ez-carousel__track::-webkit-scrollbar {
	display: none;
}

.ez-carousel--blog .ez-post {
	scroll-snap-align: start;
	height: 100%;
}

/* As setas sobre o cartao do artigo, nao fora da caixa: a secao do blog
   ocupa a largura toda do respiro e nao sobra margem. */
.ez-carousel--blog .ez-carousel__nav--prev { left: -26px; }
.ez-carousel--blog .ez-carousel__nav--next { right: -26px; }

@media (max-width: 1320px) {
	.ez-carousel--blog .ez-carousel__nav--prev { left: -10px; }
	.ez-carousel--blog .ez-carousel__nav--next { right: -10px; }
}

@media (max-width: 1024px) {
	.ez-carousel--blog .ez-carousel__track {
		grid-auto-columns: calc((100% - var(--ez-gap)) / 2);
	}
}

@media (max-width: 640px) {
	.ez-carousel--blog .ez-carousel__track {
		grid-auto-columns: 86%;
	}
}