/* Do Papel para o Mundo — seções
   Crazy Diamond Soluções Digitais */

/* ---------- cabeçalho ---------- */

.cabecalho {
	position: relative;
	z-index: 5;
	padding-block: 1.5rem;
}

.cabecalho__marca {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	text-decoration: none;
}

.cabecalho__mascote {
	width: 52px;
	height: 52px;
	flex: none;
}

.cabecalho__logotipo {
	width: clamp(150px, 24vw, 210px);
	height: auto;
}

/* o lettering do logo é preto; sobre fundo escuro precisa inverter */
.secao--escura .cabecalho__logotipo path {
	fill: var(--papel);
}

/* ---------- 1. abertura ---------- */

.abertura {
	position: relative;
	padding-bottom: var(--respiro);
	overflow: hidden;
}

.abertura::after {
	content: '';
	position: absolute;
	right: -18%;
	top: -12%;
	width: 55vw;
	max-width: 560px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(69, 170, 222, 0.14), transparent 68%);
	pointer-events: none;
}

/* hero dividido: texto e foto lado a lado no desktop, empilhados no celular */
.abertura__grade {
	position: relative;
	z-index: 2;
	display: grid;
	gap: clamp(2.25rem, 5vw, 3rem);
	padding-top: clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 1100px) {
	.abertura__grade {
		grid-template-columns: 60fr 40fr;
		gap: clamp(2rem, 4vw, 3.5rem);
		/* a altura da linha vem da faixa 9:16; o texto se centraliza nela */
		align-items: center;
	}

	.abertura__conteudo {
		padding-block: clamp(1rem, 3vw, 2.5rem);
	}

	.abertura__foto {
		max-width: 500px;
		margin: 0;
		align-self: center;
	}
}

.abertura__conteudo {
	max-width: 40rem;
}

/*
 * Mobile-first de propósito: o teto de largura é o padrão e só é removido no layout de
 * duas colunas. Escrever isto como `@media (max-width: N)` criava um vão — numa janela
 * fracionária (899,5px) nem `max-width: 899px` nem `min-width: 900px` batem, e a foto
 * esticava para 840px de largura. Sem query no estado base, o vão não existe.
 */
.abertura__foto {
	margin: 0 auto;
	position: relative;
	width: 100%;
	max-width: 420px;
}

.abertura__foto img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	/* a marca d'água fica embaixo à esquerda nesta foto; o enquadramento sobe um pouco
	   para privilegiar a capa e a lombada */
	object-position: center 42%;
	border-radius: var(--raio);
	box-shadow: 0 28px 60px -28px rgba(0, 0, 0, 0.75);
}

/*
 * Nota: numa coluna só, o limite é de LARGURA e nunca de altura. Limitar a altura fazia
 * o `object-fit: cover` achatar a foto 4:5 numa faixa deitada — exatamente o recorte que
 * corta a Bíblia ao meio e que motivou não usar hero de largura total.
 */

.abertura__slogan {
	margin-bottom: 1.25rem;
}

.abertura h1 {
	margin-bottom: 1.75rem;
}

.abertura__texto {
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	color: #dfe8ec;
	margin-bottom: 1rem;
}

.abertura__preco {
	color: var(--caramelo-luz);
	font-weight: 600;
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
	display: block;
	margin-bottom: 0.5rem;
	line-height: 1.35;
}

.abertura__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2.25rem;
}

.abertura__acoes .botao--contorno {
	color: var(--papel);
	box-shadow: inset 0 0 0 2px rgba(251, 249, 245, 0.5);
}

.abertura__acoes .botao--contorno:hover {
	background: var(--papel);
	color: var(--tinta);
}

/*
 * A mídia da abertura sangra até a borda da janela, sem cantos arredondados e sem sombra.
 * Em vez de um card recortado, ela vira uma faixa de imagem que se dissolve no fundo
 * escuro por um degradê — sem emenda visível.
 *
 * No celular sangra dos dois lados; no desktop só do lado direito.
 */
.abertura__midia {
	width: auto;
	margin-inline: calc(-1 * var(--sangria));
	margin-top: 0.5rem;
}

@media (min-width: 1100px) {
	.abertura__midia {
		margin-inline: 0 calc(-1 * var(--sangria));
		margin-top: 0;
	}
}

/*
 * Acima de ~1540px a faixa PARA de sangrar.
 *
 * Motivo, medido em tela de 2560: a coluna de 40% mais a sangria daria uns 1100px de
 * largura, e 9:16 disso são quase 2000px de altura. Não cabe. Cortando para caber, sobra
 * um close extremo de uma mão, e ainda fica um vazio de quase mil pixels entre o texto e a
 * faixa, porque o texto está preso ao container de 1140 e a faixa foi para a borda.
 *
 * Nessa faixa de tamanho o certo é a imagem ficar ao lado do texto, no tamanho natural.
 * O degradê ganha o quarto lado (direita) para a faixa continuar sem borda dura — é o que
 * impede de virar card de novo.
 */
@media (min-width: 1540px) {
	.abertura__midia {
		margin-inline: 0;
	}

	.abertura__midia .video::before {
		background:
			linear-gradient(to right, var(--tinta) 0%, rgba(19, 47, 59, 0.4) 12%, rgba(19, 47, 59, 0) 40%),
			linear-gradient(to left, rgba(19, 47, 59, 0.55) 0%, rgba(19, 47, 59, 0) 16%),
			linear-gradient(to bottom, rgba(19, 47, 59, 0.8) 0%, rgba(19, 47, 59, 0) 12%),
			linear-gradient(to top, rgba(19, 47, 59, 0.8) 0%, rgba(19, 47, 59, 0) 14%);
	}
}

/*
 * O vídeo da abertura perde a moldura e vira faixa, na proporção 9:16 do próprio vídeo.
 *
 * A LARGURA manda e a altura sai da proporção. É isto que faz a faixa preencher a coluna
 * inteira e encostar na borda da janela ao mesmo tempo em que mostra o quadro completo.
 * Já tentamos o contrário — travar a altura e deixar a largura sair da proporção — e o
 * painel virou uma tira estreita colada na borda, com um vazio entre ela e o texto: ficou
 * pior que o recorte que se queria evitar.
 *
 * Tudo em estado base, e não numa `@media (max-width: N)`: um par de queries (max-899 /
 * min-900) deixa uma janela fracionária de 899,5px sem regra nenhuma, e a faixa despencava
 * para um painel de 880x1564.
 *
 * O layout de duas colunas só entra em 1100px — abaixo disso a coluna da direita ficava
 * mais estreita que 9:16 e sobrava tarja em cima e embaixo do vídeo.
 */
.abertura__midia .video {
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	aspect-ratio: 9 / 16;
	width: 100%;
	height: auto;
	/*
	 * Numa coluna só, a largura é limitada: sem isto, num tablet de 768px a faixa ficaria
	 * com quase 1000px de altura e a abertura passaria de 1900px, exigindo duas telas de
	 * rolagem antes da segunda seção. No celular a largura real é menor que este teto,
	 * então a faixa continua sangrando de ponta a ponta.
	 */
	max-width: 26rem;
	margin-inline: auto;
}

@media (min-width: 1100px) {
	.abertura__midia .video {
		max-width: none;
		margin-inline: 0;
		/* teto de altura só para monitor muito largo; abaixo disso o quadro sai inteiro */
		max-height: 65rem;
	}
}

.abertura__midia .video__capa {
	object-position: center 35%;
}

/* ---------- abertura em reprodução automática ---------- */

.video--auto .video__capa,
.video--fundo .video__fundo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

/*
 * O iframe do YouTube não recorta o conteúdo como uma imagem faria, então ele precisa ser
 * dimensionado para COBRIR a faixa: proporção 9:16 travada e obrigado a ser, no mínimo,
 * tão largo e tão alto quanto o painel. O que sobrar é cortado pelo `overflow: hidden`.
 *
 * `pointer-events: none` é o que mantém a interface do YouTube fora da tela — sem isso,
 * passar o mouse traz título, botão de compartilhar e link para o YouTube.
 */
/*
 * Seletor com duas classes de propósito. A regra genérica `.video__player` define
 * `height: 100%` e aparece depois no arquivo; empatando em especificidade, ela venceria e
 * o iframe voltaria a esticar. Subir a especificidade aqui tira a dependência da ordem.
 */
.video--auto .video__player--auto {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*
	 * Dimensionado pela LARGURA, com a proporção 9:16 travada. Como o painel é sempre mais
	 * largo que 9:16 (0,56), a altura resultante sobra e é cortada pelo `overflow: hidden`
	 * do pai — que é o efeito de "cobrir".
	 *
	 * `min-width`/`min-height` com `aspect-ratio` NÃO funciona aqui: o navegador estica o
	 * iframe até 100% nos dois eixos e quebra a proporção, e aí quem coloca tarja preta é o
	 * próprio YouTube, por dentro.
	 *
	 * Se em alguma largura o painel ficar mais estreito que 9:16, sobra faixa em cima e
	 * embaixo — e ali aparece a capa, que está posicionada atrás cobrindo o painel inteiro.
	 */
	width: 100%;
	aspect-ratio: 9 / 16;
	height: auto;
	border: 0;
	pointer-events: none;
	z-index: 1;
}

/* botão próprio para assistir com áudio, já que autoplay com som é bloqueado */
.video__som {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	border: 0;
	border-radius: 999px;
	background: rgba(19, 47, 59, 0.72);
	color: var(--papel);
	font-family: var(--fonte-marca);
	font-weight: 600;
	font-size: 0.8125rem;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(6px);
	box-shadow: inset 0 0 0 1px rgba(251, 249, 245, 0.22);
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.video__som:hover {
	background: var(--caramelo);
	transform: translateY(-2px);
}

.video__som-icone {
	width: 16px;
	height: 16px;
	flex: none;
}

.video__som-icone svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* ao trocar para o player com som, ele volta a receber cliques e a mostrar controles */
.video--auto[data-tocando='1'] .video__som,
.video--auto[data-tocando='1'] .video__capa,
.video--auto[data-tocando='1'] .video__rotulo {
	display: none;
}

.video--auto[data-tocando='1'] .video__player {
	pointer-events: auto;
}

@media (max-width: 560px) {
	.video__som span:last-child {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.video__som {
		padding: 0.7rem;
	}
}

/*
 * O degradê que costura a faixa ao fundo: forte na esquerda (onde encosta no texto)
 * e suave em cima e embaixo, para não sobrar linha reta em lugar nenhum.
 */
/*
 * Estado base (celular): a faixa ocupa a largura toda, então só precisa dissolver em cima
 * e embaixo. Sem degradê lateral, que aqui não teria contra o que dissolver.
 */
.abertura__midia .video::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to bottom, rgba(19, 47, 59, 0.85) 0%, rgba(19, 47, 59, 0) 16%),
		linear-gradient(to top, rgba(19, 47, 59, 0.9) 0%, rgba(19, 47, 59, 0) 22%);
}

/*
 * No desktop entra o degradê da esquerda, que é o que costura a faixa ao fundo e mata a
 * borda reta ao lado do texto. Intensidade calibrada olhando o resultado: mais forte que
 * isto e a foto vira um borrão escuro; mais fraco e a emenda fica visível.
 */
@media (min-width: 1100px) {
	.abertura__midia .video::before {
		background:
			linear-gradient(to right, var(--tinta) 0%, rgba(19, 47, 59, 0.45) 10%, rgba(19, 47, 59, 0) 38%),
			linear-gradient(to bottom, rgba(19, 47, 59, 0.85) 0%, rgba(19, 47, 59, 0) 14%),
			linear-gradient(to top, rgba(19, 47, 59, 0.85) 0%, rgba(19, 47, 59, 0) 18%);
	}
}

/* o véu padrão do rodapé do vídeo não é necessário aqui — o degradê acima já cobre */
.abertura__midia .video::after {
	display: none;
}

.abertura__midia .video__play,
.abertura__midia .video__rotulo {
	z-index: 2;
}

.abertura__midia .video__rotulo {
	padding: 1.15rem 1.35rem 1.4rem;
	max-width: 30ch;
}

/*
 * Quando o player abre, ele volta a ser 9:16 e fica centralizado na faixa.
 * Sem isso o YouTube colocaria tarjas pretas para caber num painel mais largo.
 */
.abertura__midia .video[data-tocando='1'] {
	display: grid;
	place-items: center;
	background: #000;
}

.abertura__midia .video[data-tocando='1'] .video__player {
	aspect-ratio: 9 / 16;
	height: 100%;
	width: auto;
	max-width: 100%;
}

/* ---------- vídeo (capa local, player só no clique) ---------- */

.video {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16;
	border-radius: var(--raio);
	overflow: hidden;
	background: var(--tinta-media);
	box-shadow: 0 28px 60px -28px rgba(0, 0, 0, 0.75);
}

.video__botao {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
}

.video__capa {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease, filter 0.3s ease;
}

.video__botao:hover .video__capa {
	transform: scale(1.03);
	filter: brightness(0.9);
}

/* véu embaixo, para o rótulo ficar legível sobre qualquer imagem */
.video::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 55%;
	background: linear-gradient(to top, rgba(19, 47, 59, 0.92), transparent);
	pointer-events: none;
}

.video[data-tocando='1']::after {
	display: none;
}

.video__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 68px;
	height: 68px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(251, 249, 245, 0.94);
	box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.video__botao:hover .video__play {
	transform: scale(1.08);
	background: #fff;
}

.video__play svg {
	width: 34px;
	height: 34px;
	fill: var(--tinta);
	margin-left: 3px;
}

.video__rotulo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 1rem 1.15rem 1.15rem;
	font-family: var(--fonte-marca);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--papel);
	text-align: left;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.video__player {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* lista de vídeos dentro da galeria */

.videos {
	margin-top: clamp(3rem, 6vw, 4.5rem);
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
	border-top: 1px solid rgba(30, 63, 78, 0.16);
}

.videos__titulo {
	margin-bottom: 1.5rem;
}

.videos__lista {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
	max-width: 360px;
}

@media (min-width: 700px) {
	.videos__lista {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
		max-width: 740px;
	}
}

/* ---------- 2. quem somos ---------- */

.pessoas {
	display: grid;
	gap: 2.5rem;
	margin-top: 2.75rem;
}

@media (min-width: 800px) {
	.pessoas {
		grid-template-columns: 1fr 1fr;
		gap: 3.5rem;
	}
}

.pessoa__nome {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	margin-bottom: 0.85rem;
	color: var(--caramelo);
}

.pessoa__marcador {
	color: var(--marca-verde);
	font-size: 1.15em;
	line-height: 1;
}

.quem-somos__intro {
	margin-top: 1.5rem;
}

.quem-somos__fecho {
	margin: 3rem auto 0;
	max-width: 44rem;
	text-align: center;
	font-style: italic;
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	color: var(--tinta-media);
	position: relative;
	padding-top: 2.5rem;
}

.quem-somos__fecho::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 64px;
	height: 2px;
	background: var(--caramelo-luz);
}

/* ---------- 3. produtos ---------- */

.produto {
	display: grid;
	gap: 2rem;
	align-items: center;
}

.produto + .produto {
	margin-top: clamp(3.5rem, 7vw, 5.5rem);
}

@media (min-width: 860px) {
	.produto {
		grid-template-columns: 1fr 1fr;
		gap: 3.5rem;
	}

	.produto--espelhado .produto__midia {
		order: -1;
	}
}

.produto__midia img {
	width: 100%;
	border-radius: var(--raio);
	box-shadow: 0 18px 40px -22px rgba(19, 47, 59, 0.55);
}

.produto h2 {
	margin-bottom: 1.1rem;
}

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

.processo {
	margin: 1.6rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.7rem;
}

.processo li {
	position: relative;
	padding-left: 1.85rem;
	line-height: 1.55;
}

.processo li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--marca-verde);
}

.produto__fecho {
	margin-top: 1.5rem;
}

/* ---------- antes e depois ---------- */

.comparacoes {
	margin-top: clamp(2rem, 4vw, 3rem);
	display: grid;
	gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* duas colunas já a partir de 760px, como a cliente pediu */
@media (min-width: 760px) {
	.comparacoes {
		grid-template-columns: repeat(2, 1fr);
	}
}

.comparacao {
	margin: 0;
}

/* ---------- cortina de arrastar ---------- */

.cortina {
	--posicao: 50%;

	position: relative;
	border-radius: var(--raio);
	overflow: hidden;
	background: var(--papel-faixa);
	touch-action: pan-y;
	cursor: ew-resize;
}

.cortina img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

/* a foto de "depois" fica por cima, recortada até a posição da cortina */
.cortina__depois {
	position: absolute;
	inset: 0;
	clip-path: inset(0 0 0 var(--posicao));
}

.cortina__linha {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--posicao);
	width: 2px;
	margin-left: -1px;
	background: rgba(251, 249, 245, 0.9);
	box-shadow: 0 0 0 1px rgba(19, 47, 59, 0.25);
	pointer-events: none;
}

.cortina__alca {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--papel);
	box-shadow: 0 4px 14px -4px rgba(19, 47, 59, 0.6);
}

.cortina__alca svg {
	width: 22px;
	height: 22px;
	fill: var(--tinta);
}

/*
 * O <input type=range> cobre a foto inteira e fica invisível: ele é quem recebe arrastar,
 * toque e teclado. A linha e a alça acima são só o desenho.
 */
.cortina__controle {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	appearance: none;
	background: transparent;
}

.cortina__controle::-webkit-slider-thumb {
	appearance: none;
	width: 44px;
	height: 100%;
}

.cortina__controle::-moz-range-thumb {
	width: 44px;
	height: 100%;
	border: 0;
	background: transparent;
}

/* o foco precisa aparecer, já que o controle é invisível */
.cortina__controle:focus-visible + .cortina__linha .cortina__alca {
	outline: 3px solid var(--caramelo);
	outline-offset: 3px;
}

.cortina__marca {
	position: absolute;
	bottom: 0.6rem;
	z-index: 2;
	font-family: var(--fonte-marca);
	font-weight: 600;
	font-size: 0.6875rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 0.32rem 0.7rem;
	border-radius: 999px;
	color: var(--papel);
	backdrop-filter: blur(4px);
	pointer-events: none;
}

/* o "antes" em tinta e o "depois" em verde: o contraste conta a história sozinho */
.cortina__marca--antes {
	left: 0.6rem;
	background: rgba(19, 47, 59, 0.82);
}

.cortina__marca--depois {
	right: 0.6rem;
	background: rgba(53, 133, 88, 0.9);
}

.comparacao__legenda {
	margin-top: 0.85rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--tinta-media);
}

.antes-depois__fecho {
	margin-top: clamp(2.25rem, 4vw, 3rem);
	max-width: 46rem;
	font-size: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
}

/* ---------- 4. forma de fazer ---------- */

.forma {
	text-align: center;
}

/*
 * A etiqueta parecia deslocada à esquerda mesmo com a seção centralizada: a regra base
 * `p { max-width: 68ch }` faz o parágrafo virar uma caixa mais estreita, encostada à
 * esquerda, e o `text-align: center` centraliza só o texto DENTRO dessa caixa.
 * `margin-inline: auto` centraliza a caixa em si, que é o que faltava.
 *
 * O aumento de tamanho também foi pedido pela cliente em 08/08/2026.
 */
.forma .rotulo {
	margin-inline: auto;
	max-width: none;
	font-size: 0.9375rem;
	letter-spacing: 0.14em;
}

.forma__texto {
	margin: 1.5rem auto 0;
	max-width: 46rem;
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	color: #dfe8ec;
	line-height: 1.75;
}

/* ---------- 5. galeria ---------- */

.galeria__cabecalho {
	max-width: 46rem;
	margin-bottom: 2rem;
}

.galeria__cabecalho p {
	margin-top: 1rem;
	color: var(--tinta-media);
}

.filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 2.25rem;
}

.filtro {
	font-family: var(--fonte-marca);
	font-weight: 600;
	font-size: 0.875rem;
	padding: 0.6rem 1.15rem;
	border-radius: 999px;
	background: transparent;
	color: var(--tinta-media);
	box-shadow: inset 0 0 0 1.5px rgba(30, 63, 78, 0.28);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.filtro:hover {
	box-shadow: inset 0 0 0 1.5px var(--tinta);
}

.filtro[aria-pressed='true'] {
	background: var(--tinta);
	color: var(--papel);
	box-shadow: inset 0 0 0 1.5px var(--tinta);
}

.filtro__contagem {
	opacity: 0.6;
	font-weight: 600;
	margin-left: 0.3rem;
}

/* ---------- carrossel da galeria ---------- */

.carrossel {
	position: relative;
}

.galeria__grupo[hidden] {
	display: none;
}

/*
 * A faixa é quem rola. `scroll-snap` faz cada arrasto parar numa foto inteira, nunca no meio.
 * Três por vez em qualquer tamanho de tela, como a cliente pediu — no celular e no computador.
 */
.carrossel__faixa {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--vao)) / 3);
	gap: var(--vao);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/*
	 * `scroll-behavior` fica em `auto` de propósito. A suavidade das setas é feita quadro a
	 * quadro no JavaScript — ver o comentário em galeria.js. Deixar `smooth` aqui faria a
	 * atribuição de `scrollLeft` virar animação do navegador e brigar com o tween.
	 */
	scroll-behavior: auto;

	--vao: 0.6rem;
}

@media (min-width: 700px) {
	.carrossel__faixa {
		--vao: 1rem;
	}
}

.carrossel__faixa::-webkit-scrollbar {
	display: none;
}

.galeria__item {
	margin: 0;
	scroll-snap-align: start;
}

/* cada foto é um botão que abre a versão grande */
.galeria__abrir {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--papel-faixa);
	border-radius: var(--raio);
	overflow: hidden;
	cursor: zoom-in;
	position: relative;
}

.galeria__abrir img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	/* a marca d'água fica no centro da peça: o enquadramento puxa para a borda,
	   que é onde está o acabamento — ver assets/fotos/README.md */
	object-position: center 38%;
	display: block;
	transition: transform 0.4s ease;
}

.galeria__abrir:hover img {
	transform: scale(1.04);
}

.galeria__lupa {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(19, 47, 59, 0.6);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.galeria__abrir:hover .galeria__lupa,
.galeria__abrir:focus-visible .galeria__lupa {
	opacity: 1;
}

/* no toque não existe hover: a lupa fica sempre visível */
@media (hover: none) {
	.galeria__lupa {
		opacity: 1;
	}
}

.galeria__lupa svg {
	width: 17px;
	height: 17px;
	fill: var(--papel);
}

/* ---------- setas e pontinhos ---------- */

.carrossel__seta {
	position: absolute;
	top: calc(50% - 1.5rem);
	transform: translateY(-50%);
	z-index: 3;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(251, 249, 245, 0.94);
	box-shadow: 0 4px 16px -4px rgba(19, 47, 59, 0.5);
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.carrossel__seta svg {
	width: 24px;
	height: 24px;
	fill: var(--tinta);
}

.carrossel__seta:hover {
	background: #fff;
}

.carrossel__seta:disabled {
	opacity: 0;
	pointer-events: none;
}

.carrossel__seta--antes {
	left: -0.5rem;
}

.carrossel__seta--depois {
	right: -0.5rem;
}

@media (min-width: 1240px) {
	.carrossel__seta--antes {
		left: -1.4rem;
	}

	.carrossel__seta--depois {
		right: -1.4rem;
	}
}

.carrossel__pontos {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 1rem;
	min-height: 8px;
}

.carrossel__ponto {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(30, 63, 78, 0.25);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.carrossel__ponto.is-ativo {
	background: var(--caramelo);
	transform: scale(1.25);
}

/* ---------- janela de ampliação ---------- */

.lupa {
	max-width: min(92vw, 620px);
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: var(--raio);
	background: var(--tinta);
	color: var(--papel);
	overflow: visible;
}

.lupa::backdrop {
	background: rgba(19, 47, 59, 0.88);
	backdrop-filter: blur(3px);
}

.lupa__foto {
	display: block;
	width: 100%;
	max-height: 78vh;
	object-fit: contain;
	border-radius: var(--raio) var(--raio) 0 0;
}

.lupa__legenda {
	margin: 0;
	padding: 0.9rem 1.1rem 1.1rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #cfdce2;
	max-width: none;
}

.lupa__fechar {
	position: absolute;
	top: -0.75rem;
	right: -0.75rem;
	z-index: 2;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--papel);
	box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.6);
	cursor: pointer;
}

.lupa__fechar svg {
	width: 22px;
	height: 22px;
	fill: var(--tinta);
}

.galeria__vazia {
	color: var(--tinta-media);
	font-style: italic;
}

/* ---------- 6. faq ---------- */

.faq {
	margin-top: 2.5rem;
	display: grid;
	gap: 0;
	max-width: 52rem;
}

/* ---------- acordeão ---------- */

.faq__item {
	border-top: 1px solid rgba(30, 63, 78, 0.16);
}

.faq__item:last-child {
	border-bottom: 1px solid rgba(30, 63, 78, 0.16);
}

/*
 * `summary` é o gatilho nativo. Tirar o marcador padrão exige as duas linhas abaixo:
 * `list-style` cobre a maioria dos navegadores e o pseudo-elemento do WebKit cobre o Safari.
 */
.faq__pergunta {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1.5rem;
	font-family: var(--fonte-marca);
	font-weight: 600;
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	line-height: 1.4;
	color: var(--tinta);
	transition: color 0.18s ease;
}

.faq__pergunta::-webkit-details-marker {
	display: none;
}

.faq__pergunta:hover {
	color: var(--caramelo);
}

.faq__item[open] .faq__pergunta {
	color: var(--caramelo);
}

/* sinal de mais que vira menos quando abre — dois traços, sem imagem nem fonte de ícone */
.faq__sinal {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 0.2em;
}

.faq__sinal::before,
.faq__sinal::after {
	content: '';
	position: absolute;
	inset: 50% 0 auto 0;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: translateY(-50%);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.faq__sinal::after {
	transform: translateY(-50%) rotate(90deg);
}

.faq__item[open] .faq__sinal::after {
	transform: translateY(-50%) rotate(0deg);
	opacity: 0;
}

.faq__resposta {
	padding-bottom: 1.75rem;
	animation: faq-abre 0.28s ease;
}

@keyframes faq-abre {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.faq__resposta {
		animation: none;
	}
}

.faq__resposta p + p {
	margin-top: 0.85rem;
}

.passos {
	counter-reset: passo;
	list-style: none;
	padding: 0;
	margin: 1.35rem 0 0;
	display: grid;
	gap: 1.1rem;
}

.passos li {
	counter-increment: passo;
	position: relative;
	padding-left: 3.1rem;
	line-height: 1.6;
}

.passos li::before {
	content: counter(passo);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.15rem;
	height: 2.15rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--tinta);
	color: var(--papel);
	font-family: var(--fonte-marca);
	font-weight: 600;
	font-size: 0.9rem;
}

.passos strong {
	display: block;
	font-family: var(--fonte-marca);
	color: var(--tinta);
}

.faq__fecho {
	margin-top: 1.35rem;
	font-style: italic;
	color: var(--tinta-media);
}

/* ---------- rodapé ---------- */

.rodape {
	background: var(--tinta);
	color: #cfdce2;
	padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.rodape__topo {
	display: grid;
	gap: 2.25rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(251, 249, 245, 0.14);
}

@media (min-width: 760px) {
	.rodape__topo {
		grid-template-columns: 1fr 1.05fr;
		gap: 3rem;
		align-items: start;
	}
}

.rodape__marca {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.rodape__marca img {
	width: 64px;
	height: 64px;
}

.rodape__nome {
	font-family: var(--fonte-marca);
	font-weight: 600;
	color: var(--papel);
	font-size: 1.05rem;
	line-height: 1.35;
}

.rodape__slogan {
	font-size: 0.9375rem;
	color: var(--caramelo-luz);
}

.rodape__texto {
	margin-top: 1.5rem;
	font-size: 0.9375rem;
	max-width: 34rem;
}

.rodape__endereco {
	margin-top: 1.35rem;
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #cfdce2;
}

.rodape__endereco-icone {
	flex: none;
	margin-top: 0.15em;
	width: 18px;
	height: 18px;
	color: var(--caramelo-luz);
}

.rodape__endereco-icone svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* ---------- botões das redes ---------- */

.redes {
	list-style: none;
	padding: 0;
	margin: 0.9rem 0 0;
	display: grid;
	gap: 0.6rem;
}

@media (min-width: 520px) {
	.redes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 760px) {
	.redes {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 1000px) {
	.redes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.rede {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem 0.9rem;
	border-radius: var(--raio);
	text-decoration: none;
	color: #cfdce2;
	background: rgba(251, 249, 245, 0.06);
	box-shadow: inset 0 0 0 1px rgba(251, 249, 245, 0.1);
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.rede:hover {
	color: var(--papel);
	background: rgba(251, 249, 245, 0.11);
	transform: translateY(-2px);
}

.rede__icone {
	flex: none;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(251, 249, 245, 0.1);
	transition: background-color 0.18s ease;
}

.rede__icone svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
}

/* cada rede assume a própria cor no hover, sem depender de imagem de marca */
.rede--whatsapp:hover .rede__icone {
	background: #25d366;
	color: #0b3d21;
}

.rede--instagram:hover .rede__icone {
	background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7);
	color: #fff;
}

.rede--youtube:hover .rede__icone {
	background: #ff0000;
	color: #fff;
}

.rede--mapa:hover .rede__icone {
	background: #ea4335;
	color: #fff;
}

.rede__texto {
	display: grid;
	line-height: 1.3;
	min-width: 0;
}

.rede__texto strong {
	font-family: var(--fonte-marca);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--papel);
}

.rede__texto span {
	font-size: 0.8125rem;
	opacity: 0.75;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- base do rodapé ---------- */

.rodape__base {
	margin-top: 1.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: space-between;
	align-items: center;
	font-size: 0.8125rem;
	color: #9fb4bd;
}

.rodape__assinatura {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.assinatura {
	display: inline-flex;
	align-items: center;
	gap: 0.42rem;
	color: #cfdce2;
	text-decoration: none;
	padding: 0.28rem 0.6rem 0.28rem 0.4rem;
	border-radius: 999px;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.assinatura img {
	width: 20px;
	height: 20px;
	flex: none;
}

.assinatura:hover {
	background: rgba(251, 249, 245, 0.1);
	color: var(--papel);
}

/* ---------- whatsapp flutuante ---------- */

.zap {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--verde);
	color: #fff;
	font-family: var(--fonte-marca);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1;
	padding: 0.95rem 1.35rem;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 10px 30px -8px rgba(19, 47, 59, 0.55);
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.zap:hover {
	background: var(--verde-escuro);
	color: #fff;
	transform: translateY(-2px);
}

.zap svg {
	width: 22px;
	height: 22px;
	flex: none;
	fill: currentColor;
}

@media (max-width: 420px) {
	.zap__texto {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.zap {
		padding: 1rem;
	}
}