/* LR Ajustes de Layout 1.2.0
 * Página inicial resumida, passagem lateral de cartões e leitura em celular/tablet.
 * As regras da inicial usam os IDs dos blocos do Elementor (página #22).
 * Se um bloco for recriado no editor, o ID muda e a regra precisa ser refeita.
 */

/* ---------- 1. Inicial: seções retiradas (ocultas, não apagadas) ---------- */
.elementor-22 .elementor-element-ea354db4, /* 04 Trabalhos recentes (repete o portfólio) */
.elementor-22 .elementor-element-bda718c4, /* 05 Depoimentos (texto provisório) */
.elementor-22 .elementor-element-e7394587  /* Contato + formulário (existe em /contato/) */ {
	display: none !important;
}

/* ---------- 2. Inicial: passagem lateral (Portfólio e Serviços) ---------- */
.elementor-22 .elementor-element-f5a6d564 > .e-con-inner,
.elementor-22 .elementor-element-e15dabb9 > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	gap: 16px !important;
	width: 100% !important;
	max-width: none !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	padding-bottom: 8px !important;
}
.elementor-22 .elementor-element-f5a6d564 > .e-con-inner::-webkit-scrollbar,
.elementor-22 .elementor-element-e15dabb9 > .e-con-inner::-webkit-scrollbar {
	display: none;
}
.elementor-22 .elementor-element-f5a6d564 > .e-con-inner > .e-con,
.elementor-22 .elementor-element-e15dabb9 > .e-con-inner > .e-con {
	flex: 0 0 78% !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	padding: 0 !important;
	scroll-snap-align: start;
}
.elementor-22 .elementor-element-f5a6d564 > .e-con-inner > .e-con > .e-con-inner,
.elementor-22 .elementor-element-e15dabb9 > .e-con-inner > .e-con > .e-con-inner {
	max-width: none !important;
	width: 100% !important;
}
/* Cartões fora da tela (à direita) não podem esperar a animação de entrada para aparecer */
.elementor-22 .elementor-element-f5a6d564 > .e-con-inner [data-aos],
.elementor-22 .elementor-element-e15dabb9 > .e-con-inner [data-aos] {
	opacity: 1 !important;
	transform: none !important;
}
/* Fotos dos cartões com a mesma proporção */
.elementor-22 .elementor-element-f5a6d564 .zenin-card-image img,
.elementor-22 .elementor-element-e15dabb9 .zenin-service-image img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Tablet: dois cartões e meio por tela */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-22 .elementor-element-f5a6d564 > .e-con-inner > .e-con,
	.elementor-22 .elementor-element-e15dabb9 > .e-con-inner > .e-con {
		flex-basis: 40% !important;
	}
}

/* Computador: todos os cartões lado a lado, sem rolagem */
@media (min-width: 1025px) {
	.elementor-22 .elementor-element-f5a6d564 > .e-con-inner,
	.elementor-22 .elementor-element-e15dabb9 > .e-con-inner {
		overflow: visible;
		scroll-snap-type: none;
		gap: 24px !important;
	}
	.elementor-22 .elementor-element-f5a6d564 > .e-con-inner > .e-con,
	.elementor-22 .elementor-element-e15dabb9 > .e-con-inner > .e-con {
		flex: 1 1 0 !important;
	}
}

/* ---------- 3. Inicial: "Sobre mim" em duas colunas a partir do tablet ---------- */
@media (min-width: 768px) {
	.elementor-22 .elementor-element-ba7135e8 > .e-con-inner {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 40px !important;
	}
	.elementor-22 .elementor-element-ba7135e8 > .e-con-inner > .e-con {
		width: auto !important;
		max-width: none !important;
	}
}

/* ---------- 4. Leitura em celular e tablet (todo o site) ---------- */
@media (max-width: 1024px) {
	/* Título do topo: a 2ª linha estava com as letras coladas */
	.zenin-hero-title .elementor-heading-title span:first-child {
		font-size: clamp(36px, 7vw, 56px) !important;
		letter-spacing: -0.03em !important;
	}
	.zenin-hero-title .elementor-heading-title span:nth-child(2) {
		font-size: clamp(16px, 2.6vw, 22px) !important;
		letter-spacing: -0.01em !important;
		white-space: normal !important;
	}
}

@media (max-width: 800px) {
	/* Áreas de toque (mínimo recomendado: 44px) */
	.zenin-html-header .menu-toggle {
		min-height: 44px;
		min-width: 44px;
		padding: 10px 4px;
		font-size: 14px;
	}
	.zenin-html-header .nav > a {
		padding: 14px 10px !important;
		font-size: 15px;
	}
	.zenin-html-footer nav a {
		display: inline-block;
		padding: 10px 0;
	}
	.zenin-text-button .elementor-button {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}
}

@media (max-width: 767px) {
	/* Títulos de seção: 48px quebrava em 4 linhas */
	.zenin-section-title .elementor-heading-title,
	.zenin-cta-title .elementor-heading-title {
		font-size: 32px !important;
		line-height: 1.15 !important;
		letter-spacing: -0.03em !important;
	}
	/* Textos de 9 a 11px passam a 12–13px */
	.zenin-eyebrow p,
	.zenin-tiny p,
	.zenin-small p,
	.zenin-contact-form.contact-form .form-note {
		font-size: 12px !important;
	}
	.zenin-contact-form.contact-form label {
		font-size: 13px !important;
	}
	.zenin-contact-form.contact-form label span {
		font-size: 11px !important;
	}
	.zenin-html-footer p,
	.zenin-html-footer nav,
	.zenin-html-footer .social-links {
		font-size: 13px !important;
	}
	.zenin-html-footer .social-links small,
	.zenin-html-footer .footer-bottom {
		font-size: 11px !important;
	}
}

/* ---------- 5. Logo (todo o site) ----------
 * O desenho vem dos PNGs transparentes desta pasta e é pintado com a cor creme do site
 * por máscara CSS. O texto original continua no HTML para leitores de tela e buscadores.
 */
.zenin-html-header .monogram {
	display: inline-block;
	width: 59px;
	height: 42px;
	font-size: 0 !important;
	letter-spacing: 0 !important;
	background-color: #fde3a7;
	-webkit-mask: url(logo-simbolo.png) center / contain no-repeat;
	mask: url(logo-simbolo.png) center / contain no-repeat;
}
.zenin-html-header .monogram > span {
	display: none;
}
.zenin-html-footer .footer-brand {
	display: block;
	width: 142px;
	height: 120px;
	margin-bottom: 14px;
	font-size: 0 !important;
	letter-spacing: 0 !important;
	background-color: #fde3a7;
	-webkit-mask: url(logo-completo.png) left center / contain no-repeat;
	mask: url(logo-completo.png) left center / contain no-repeat;
}
.zenin-html-footer .footer-brand span {
	display: none;
}
@media (max-width: 800px) {
	.zenin-html-header .monogram {
		width: 51px;
		height: 36px;
	}
}

/* ---------- 6. Retrato do Lucas nas seções "sobre" ----------
 * Troca provisória por CSS: a imagem original continua no Elementor (e o texto alternativo
 * antigo também). Quando a foto for trocada no Elementor, apague este bloco.
 */
.elementor-22 .elementor-element-1f9d6f51 img, /* Inicial: "Prazer, Lucas Rodrigues." */
.elementor-23 .elementor-element-175f63c9 img  /* Página Sobre: imagem do topo */ {
	content: url(retrato-lucas.webp);
	display: block;
	width: 100% !important;
	max-width: 440px;
	height: auto !important;
	aspect-ratio: 4 / 5 !important;
	object-fit: cover;
}