/*!
 * Imagine.IDE — landing page de serviço
 *
 * Por que classes próprias e não as utilitárias do tema: o CSS do site é
 * Tailwind **compilado**, e compilado só carrega as classes que existiam no
 * código-fonte na hora do build. Classe utilitária que eu invente agora não
 * existe no arquivo — foi assim que o `h1` desta página nasceu com 16px, sem
 * erro nenhum aparecer.
 *
 * As cores vêm dos mesmos valores do resto do site: fundo #0E0E10, âmbar
 * #F5A623, texto #F3F1EA, apoio #8D8D97, borda em branco a 8%.
 */

/* ── ritmo vertical ──────────────────────────────────────── */

.ii-lp-secao {
	padding: 5rem 0;
	border-top: 1px solid rgba(255, 255, 255, .05);
}

.ii-lp-hero {
	position: relative;
	overflow: hidden;
	padding: 7rem 0 4rem;
}

.ii-lp-largura {
	width: 100%;
	max-width: 56rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.ii-lp-largura--estreita { max-width: 44rem; }
.ii-lp-largura--larga    { max-width: 72rem; }

@media (min-width: 1024px) {
	.ii-lp-secao { padding: 6rem 0; }
	.ii-lp-hero  { padding: 8rem 0 5rem; }
	.ii-lp-largura { padding-inline: 2.5rem; }
}

/* ── títulos ─────────────────────────────────────────────── */

.ii-lp-titulo {
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 600;
	/* 32px no telemóvel, 46px no desktop, sem degrau brusco no meio */
	font-size: clamp(2rem, 1.35rem + 2.6vw, 2.875rem);
	line-height: 1.14;
	letter-spacing: -.02em;
	margin: 1.5rem 0 0;
	text-wrap: balance;
}

.ii-lp-subtitulo {
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 600;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
	line-height: 1.2;
	letter-spacing: -.015em;
	margin: 0;
	text-wrap: balance;
}

.ii-lp-lead {
	margin: 1.5rem 0 0;
	max-width: 40rem;
	font-size: 1.125rem;
	line-height: 1.65;
	color: #8D8D97;
}

.ii-lp-nota {
	margin: 1.25rem 0 0;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: .75rem;
	color: rgba(141, 141, 151, .8);
}

/* ── chamadas ────────────────────────────────────────────── */

.ii-lp-acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 2.25rem;
}

/* ── os sinais ───────────────────────────────────────────── */

.ii-lp-sinais {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	gap: 1.25rem 2rem;
}

@media (min-width: 640px) {
	.ii-lp-sinais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ii-lp-sinais li {
	display: flex;
	gap: .75rem;
	color: #8D8D97;
	line-height: 1.6;
}

.ii-lp-marca {
	flex: 0 0 auto;      /* sem isto o ponto vira oval quando o texto puxa */
	width: 6px;
	height: 6px;
	margin-top: .55rem;
	border-radius: 50%;
	background: #F5A623;
}

.ii-lp-fecho {
	margin: 2rem 0 0;
	color: #8D8D97;
	line-height: 1.65;
}

/* ── prova: cartões de projeto ───────────────────────────── */

.ii-lp-projetos {
	display: grid;
	gap: 1.5rem;
	margin-top: 2.5rem;
}

@media (min-width: 640px) { .ii-lp-projetos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ii-lp-projetos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ii-lp-projeto {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ii-lp-projeto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .08);
}

.ii-lp-projeto h3 {
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.3;
	margin: .5rem 0 0;
	color: #F3F1EA;
}

.ii-lp-projeto p {
	margin: .5rem 0 0;
	font-size: .875rem;
	line-height: 1.55;
	color: #8D8D97;
}

.ii-lp-projeto:hover h3 { color: #F5A623; }
.ii-lp-projeto .eyebrow { margin-top: 1rem; display: inline-flex; }

.ii-lp-depois { margin-top: 2.5rem; }

/* ── FAQ ─────────────────────────────────────────────────── */

.ii-lp-faq {
	margin-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, .07);
}

.ii-lp-faq details {
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.ii-lp-faq summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 0;
	cursor: pointer;
	list-style: none;
	font-weight: 500;
	color: #F3F1EA;
}

/* o triângulo padrão do Safari e do Chrome */
.ii-lp-faq summary::-webkit-details-marker { display: none; }
.ii-lp-faq summary::marker { content: ''; }

.ii-lp-faq summary:hover { color: #F5A623; }

.ii-lp-faq-mais {
	flex: 0 0 auto;
	margin-top: .2rem;
	color: #8D8D97;
	line-height: 0;
	transition: transform .2s ease, color .2s ease;
}

.ii-lp-faq details[open] .ii-lp-faq-mais {
	transform: rotate(45deg);
	color: #F5A623;
}

.ii-lp-faq p {
	margin: 0 0 1.35rem;
	padding-right: 2rem;
	color: #8D8D97;
	line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
	.ii-lp-faq-mais { transition: none; }
}

/* ── foco visível ────────────────────────────────────────── */

.ii-lp-secao a:focus-visible,
.ii-lp-hero a:focus-visible,
.ii-lp-faq summary:focus-visible {
	outline: 2px solid #F5A623;
	outline-offset: 3px;
}

/* ── dois remendos com motivo ────────────────────────────── */

/* A migalha e o selo "Serviços" nasciam com 0px de vão entre eles. */
.ii-lp-hero .eyebrow { margin-top: 1.25rem; }

/* O bloco de processo vem do tema, onde este rótulo nasce com opacity 0
   e quem o revela é o GSAP daquela página. Aqui aquele JS não roda, e ele
   ficava invisível — texto presente no HTML e ausente na tela. */
body.single-servico .proc-core-label { opacity: 1; }

/* ── portfólio: o cartão inteiro vira link ───────────────── */

/*
 * Os 20 cartões do portfólio nunca foram clicáveis — nem aqui, nem no site
 * estático de onde vieram. Em vez de embrulhar o <article> num <a>, o que
 * mexeria em cada regra que mira `article.portfolio-card`, o link cobre o
 * cartão por cima. O título e a descrição continuam selecionáveis porque o
 * link fica atrás deles no empilhamento.
 */

.portfolio-card { position: relative; }

.pf-cobre {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
}

.pf-cobre:focus-visible {
	outline: 2px solid #F5A623;
	outline-offset: 4px;
}

.portfolio-card .pf-title,
.portfolio-card .pf-desc { position: relative; z-index: 3; }

/* o rótulo de leitor de tela, que o tema pode não ter */
.pf-cobre .screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}