/*
 * Página inicial (celular primeiro, computador a partir de 900px).
 * Referência: Main.dc.html e HomeMobile.dc.html.
 */

/* ---------- Destaque ---------- */

.ir-heroi {
	display: flex;
	flex-direction: column;
	padding-top: 18px;
}

.ir-heroi__fotos {
	order: -1;
}

.ir-heroi__principal {
	position: relative;
	height: 430px;
	overflow: hidden;
	border-radius: var(--ir-raio-card-g);
	background: var(--ir-fundo-suave);
}

.ir-heroi__imagem {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ir-heroi__produto {
	position: absolute;
	right: 12px;
	bottom: 12px;
	left: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.95);
	text-decoration: none;
}

.ir-heroi__produto img {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 9px;
	object-fit: cover;
}

.ir-heroi__produto-texto {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.ir-heroi__produto-nome {
	font-size: 13px;
	font-weight: var(--ir-peso-forte);
}

.ir-heroi__produto-preco {
	color: var(--ir-cor-secundaria);
	font-size: 11px;
}

.ir-heroi__produto .ir-icone {
	width: 18px;
	height: 18px;
}

.ir-heroi__segunda,
.ir-heroi__peca {
	display: none;
}

.ir-heroi .ir-selo {
	align-self: flex-start;
	height: 26px;
	margin-top: 22px;
	padding: 0 12px 0 17px;
	font-size: 10px;
	clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%);
}

.ir-heroi__texto {
	display: flex;
	flex-direction: column;
}

.ir-heroi__titulo {
	margin: 14px 0 0;
	font-size: 32px;
	font-weight: var(--ir-peso-fino);
	line-height: 1.1;
}

.ir-heroi__titulo strong {
	font-weight: var(--ir-peso-forte);
}

.ir-heroi__descricao {
	margin: 12px 0 0;
	color: var(--ir-cor-secundaria);
	font-size: 15px;
	line-height: 1.6;
}

.ir-heroi__acoes {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

.ir-heroi__acoes .ir-botao {
	min-height: 54px;
}

.ir-heroi__acoes .ir-icone {
	width: 18px;
	height: 18px;
}

.ir-heroi__nota {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 16px 0 0;
	font-size: 12px;
}

.ir-heroi__nota > span:last-child {
	color: var(--ir-cor-secundaria);
}

.ir-heroi__nota .ir-estrelas svg {
	width: 13px;
	height: 13px;
}

/* "Do pedido à sua parede" fica um pouco mais perto da seção anterior no celular. */
.ir-secao--passos {
	padding-top: 28px;
}

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

.ir-beneficios {
	margin-top: 28px;
	border-top: 1px solid var(--ir-cor-borda-suave);
	border-bottom: 1px solid var(--ir-cor-borda-suave);
}

.ir-beneficios__lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 12px;
	padding-top: 16px;
	padding-bottom: 16px;
}

.ir-beneficio {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.ir-beneficio__icone {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--ir-fundo-suave);
}

.ir-beneficio__icone .ir-icone {
	width: 18px;
	height: 18px;
	stroke-width: 1.7;
}

.ir-beneficio__texto {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.ir-beneficio__texto strong {
	font-size: 12px;
	font-weight: var(--ir-peso-destaque);
}

.ir-beneficio__texto span {
	color: var(--ir-cor-secundaria);
	font-size: 11px;
}

/* ---------- Escolha pelo tom ---------- */

.ir-tons__lista {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

/* Cresce para ocupar a largura quando sobra espaço (tablet); rola quando falta. */
.ir-tons__lista > li {
	flex: 1 0 150px;
	scroll-snap-align: start;
}

.ir-tom {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 200px;
	overflow: hidden;
	border-radius: var(--ir-raio-card-p);
	background: var(--ir-fundo-suave);
	text-decoration: none;
}

.ir-tom__imagem {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ir-tom__cartao {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	margin: 8px;
	padding: 8px 10px;
	border-radius: var(--ir-raio-campo);
	background: rgba(255, 255, 255, 0.95);
}

.ir-tom__texto {
	display: flex;
	flex-direction: column;
}

.ir-tom__texto strong {
	font-size: 13px;
	font-weight: var(--ir-peso-forte);
}

.ir-tom__texto span {
	color: var(--ir-cor-secundaria);
	font-size: 11px;
}

.ir-tom__cartao .ir-icone {
	display: none;
	width: 18px;
	height: 18px;
}

/* ---------- Disponíveis ---------- */

.ir-disponiveis__todos {
	width: 100%;
	min-height: 50px;
	margin-top: 18px;
	font-weight: var(--ir-peso-destaque);
	letter-spacing: 0;
	text-transform: none;
}

/* ---------- Calculadora ---------- */

.ir-calculadora {
	padding: 22px 18px;
	border-radius: var(--ir-raio-card-g);
	background: var(--ir-preto);
	color: var(--ir-fundo);
}

.ir-calculadora__titulo {
	margin: 0;
	font-size: 22px;
	font-weight: var(--ir-peso-fino);
	line-height: 1.2;
}

.ir-calculadora__titulo strong {
	font-weight: var(--ir-peso-destaque);
}

.ir-calculadora__texto p {
	margin: 8px 0 0;
	color: #D6D6D6;
	font-size: 13px;
}

.ir-calculadora__campos {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: end;
	gap: 10px;
	margin-top: 16px;
}

.ir-calculadora__campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: #D6D6D6;
	font-size: 12px;
}

.ir-calculadora__campo input {
	width: 100%;
	height: 50px;
	border: 1px solid #3A3A3A;
	border-radius: var(--ir-raio-campo);
	background: #1E1E1E;
	color: var(--ir-fundo);
	font-size: 16px;
	font-weight: var(--ir-peso-destaque);
	text-align: center;
}

.ir-calculadora__vezes {
	display: flex;
	align-items: center;
	height: 50px;
	color: var(--ir-escuro-separador);
}

.ir-calculadora__resultado {
	display: flex;
	grid-column: 1;
	flex-direction: column;
	margin: 6px 0 0;
}

.ir-calculadora__resultado span {
	color: var(--ir-escuro-texto);
	font-size: 12px;
}

.ir-calculadora__resultado output {
	font-size: 26px;
	font-weight: var(--ir-peso-destaque);
}

.ir-calculadora__acao {
	display: inline-flex;
	grid-column: 2 / 4;
	white-space: nowrap;
	align-items: center;
	justify-content: center;
	justify-self: end;
	min-height: 50px;
	padding: 0 18px;
	border-radius: var(--ir-raio-botao);
	background: var(--ir-fundo);
	color: var(--ir-cor-texto);
	font-size: 12px;
	font-weight: var(--ir-peso-forte);
	letter-spacing: 0.1em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.ir-calculadora__acao:hover {
	background: var(--ir-fundo-suave);
	color: var(--ir-cor-texto);
}

/* ---------- Paredes dos clientes ---------- */

.ir-paredes__lista {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.ir-paredes__item {
	flex: 0 0 240px;
	scroll-snap-align: start;
}

.ir-paredes__item img {
	display: block;
	width: 100%;
	height: 300px;
	border-radius: var(--ir-raio-card-p);
	object-fit: cover;
}

.ir-paredes > .ir-so-celular {
	margin-top: 10px;
}

/* A animação da peça flutuando (ir-flutuar) está em components.css. */

/* ---------- Computador ---------- */

@media (min-width: 900px) {
	.ir-heroi {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 40px;
		padding-top: 24px;
		padding-bottom: 56px;
	}

	.ir-heroi__texto {
		flex: 1 1 460px;
		min-width: 0;
	}

	.ir-heroi__fotos {
		display: grid;
		flex: 1.15 1 520px;
		grid-template-columns: 1.4fr 1fr;
		grid-template-rows: 280px 260px;
		gap: 14px;
		order: 0;
		min-width: 0;
	}

	.ir-heroi__principal {
		grid-row: span 2;
		height: auto;
		border-radius: 24px;
	}

	.ir-heroi__produto {
		right: 14px;
		bottom: 14px;
		left: 14px;
		gap: 12px;
		padding: 10px 12px;
		border-radius: 16px;
	}

	.ir-heroi__produto img {
		width: 44px;
		height: 44px;
		border-radius: 10px;
	}

	.ir-heroi__produto-preco {
		font-size: 12px;
	}

	.ir-heroi__segunda {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 24px;
		object-fit: cover;
	}

	.ir-heroi__peca {
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		border-radius: 24px;
		background: var(--ir-fundo-suave-2);
	}

	.ir-heroi__peca img {
		display: block;
		width: 78%;
		height: auto;
		filter: drop-shadow(0 18px 16px rgba(17, 17, 17, 0.2));
		transform: rotate(-8deg);
		animation: ir-flutuar 5s ease-in-out infinite;
	}

	.ir-heroi .ir-selo {
		height: 30px;
		margin-top: 0;
		padding: 0 14px 0 20px;
		font-size: 11px;
		clip-path: var(--ir-chevron);
	}

	.ir-heroi__titulo {
		margin-top: 22px;
		font-size: clamp(40px, 4.6vw, 64px);
		line-height: 1.05;
		letter-spacing: -0.01em;
	}

	.ir-heroi__descricao {
		max-width: 500px;
		margin-top: 20px;
		font-size: 17px;
		line-height: 1.65;
	}

	.ir-heroi__acoes {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 12px;
		margin-top: 28px;
	}

	.ir-heroi__acoes .ir-botao {
		min-height: 56px;
	}

	.ir-heroi__nota {
		justify-content: flex-start;
		gap: 8px;
		margin-top: 24px;
		font-size: 13px;
	}

	.ir-heroi__nota .ir-estrelas svg {
		width: 15px;
		height: 15px;
	}

	.ir-secao--passos {
		padding-top: 72px;
	}

	/* Sempre 4 cartões numa linha (com auto-fill, em 1024px sobrariam 3 + 1). */
	.ir-disponiveis .ir-grade-produtos {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ir-beneficios {
		margin-top: 0;
	}

	.ir-beneficios__lista {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 16px;
		padding-top: 22px;
		padding-bottom: 22px;
	}

	.ir-beneficio {
		gap: 12px;
	}

	.ir-beneficio__icone {
		width: 42px;
		height: 42px;
		border-radius: var(--ir-raio-campo);
	}

	.ir-beneficio__icone .ir-icone {
		width: 20px;
		height: 20px;
	}

	.ir-beneficio__texto {
		line-height: 1.5;
	}

	.ir-beneficio__texto strong {
		font-size: 14px;
	}

	.ir-beneficio__texto span {
		font-size: 12px;
	}

	.ir-tons__lista {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
		overflow: visible;
	}

	.ir-tom {
		height: 320px;
		border-radius: var(--ir-raio-card-g);
	}

	.ir-tom__cartao {
		margin: 14px;
		padding: 12px 14px;
		border-radius: var(--ir-raio-botao);
	}

	.ir-tom__texto strong {
		font-size: 16px;
	}

	.ir-tom__texto span {
		font-size: 12px;
	}

	.ir-tom__cartao .ir-icone {
		display: block;
	}

	.ir-calculadora {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 28px;
		padding: 40px;
		border-radius: var(--ir-raio-bloco);
	}

	.ir-calculadora__texto {
		flex: 1 1 360px;
	}

	.ir-calculadora__titulo {
		font-size: 30px;
		line-height: 1.15;
	}

	.ir-calculadora__texto p {
		margin-top: 10px;
		font-size: 14px;
	}

	.ir-calculadora__campos {
		display: flex;
		flex: 1 1 520px;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px;
		margin-top: 0;
	}

	.ir-calculadora__campo {
		flex-direction: row;
		align-items: center;
		gap: 8px;
		font-size: 13px;
	}

	.ir-calculadora__campo input {
		width: 70px;
	}

	.ir-calculadora__vezes {
		height: auto;
	}

	.ir-calculadora__resultado {
		flex: 1 1 120px;
		margin: 0;
		padding-left: 8px;
	}

	.ir-calculadora__acao {
		min-height: 52px;
		padding: 0 22px;
		font-size: 13px;
	}

	.ir-paredes__lista {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-rows: 260px 260px;
		gap: 12px;
		overflow: visible;
	}

	.ir-paredes__item:nth-child(1) {
		grid-column: span 2;
	}

	.ir-paredes__item:nth-child(2),
	.ir-paredes__item:nth-child(3) {
		grid-row: span 2;
	}

	.ir-paredes__item img {
		height: 100%;
		border-radius: var(--ir-raio-card-g);
	}
}