/* =====================================================================
   estrutura-texto.css
   Só o esqueleto: espaçamento, largura, alinhamento. Zero cor.
   Cole por cima da paleta que o projeto usar.
   ===================================================================== */

:root {
	/* Espaçamento — escala base 8px */
	--wt-space-1: 8px;
	--wt-space-2: 16px;
	--wt-space-3: 24px;
	--wt-space-4: 40px;
	--wt-space-5: 64px;
	--wt-space-6: 96px;
	--wt-space-7: 160px;

	/* Layout */
	--wt-section-pad:      128px;
	--wt-container-width:  1360px;
	--wt-container-gutter: clamp(24px, 5vw, 80px);
}

/* Mobile: redefine o TOKEN, nunca o padding do .wt-section.
   Assim tudo que deriva dele continua em passo. */
@media (max-width: 900px) {
	:root { --wt-section-pad: 64px; }
}

/* =====================================================================
   1. CASCA
   ===================================================================== */

/* Única fonte de largura da página. Nenhum filho repete padding lateral. */
.wt-container {
	width: 100%;
	max-width: var(--wt-container-width);
	margin-inline: auto;
	padding-inline: var(--wt-container-gutter);
}

/* Única fonte de respiro vertical. Nenhum bloco interno usa margin
   para se afastar da seção vizinha. */
.wt-section { padding-block: var(--wt-section-pad); }

.wt-hero,
.wt-section,
.wt-footer { width: 100%; }

/* Divisória entre seções: margin ZERO. As duas seções vizinhas já
   trazem o respiro no próprio padding — margin aqui somaria. */
.wt-divider {
	border: none;
	height: 1px;
	margin-block: 0;
}

/* =====================================================================
   2. CABEÇALHO DE SEÇÃO — dois tipos
   ===================================================================== */

/* 2.1 Centrado (padrão). Ordem interna fixa: rótulo → h2 → lead. */
.wt-section__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wt-space-2);
	max-width: 900px;
	margin-inline: auto;
	margin-bottom: var(--wt-space-5);
	text-align: center;
}

/* 2.2 Dividido: título à esquerda, descrição à direita.
   align-items: end assenta os dois na mesma linha de base inferior —
   pelo topo eles flutuariam, porque têm alturas diferentes. */
.wt-split-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wt-space-4);
	align-items: end;
	margin-bottom: var(--wt-space-6);
}

.wt-split-head__titulo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wt-space-2);
}

/* Ocupa a coluna inteira: os tetos de 62ch/46ch encurtariam antes da metade */
.wt-split-head__desc p { max-width: none; }

@media (max-width: 900px) {
	.wt-split-head {
		grid-template-columns: 1fr;
		gap: var(--wt-space-2);
		text-align: center;
	}
	/* Empilhado, título e descrição viram um bloco só. À esquerda, o rótulo
	   ficaria solto acima de um H2 de largura irregular. */
	.wt-split-head__titulo { align-items: center; }
}

/* =====================================================================
   3. TEXTO — três modos, escolhidos pelo papel, não pelo gosto
   ===================================================================== */

/* 3.1 CHAMADA CURTA (1–3 linhas) → centro, nunca justificada.
   Justificar uma frase de duas linhas só abre buraco entre as palavras. */
.wt-lead {
	max-width: 46ch;
	margin-inline: auto;
	line-height: 1.6;
	text-align: center;
}

/* 3.2 CORPO CORRIDO (4+ linhas) → justificado.
   hyphens é obrigatório: é o que segura os "rios" de espaço branco. */
.wt-body {
	max-width: 62ch;
	line-height: 1.7;
	text-align: justify;
	hyphens: auto;
}

/* 3.3 DESCRIÇÃO DENTRO DE CARD → justificada, SEM teto.
   Título e descrição precisam dividir a mesma medida para que as
   bordas do justificado alinhem entre si. Quem manda é a coluna do grid. */
.wt-item-card__desc,
.wt-destaque-card .wt-body {
	max-width: none;
	text-align: justify;
	hyphens: auto;
}

/* Grid de cards justificados precisa de stretch.
   Com os blocos encolhidos e centrados, o justify não teria borda direita
   para acertar — o texto ficaria centralizado do mesmo jeito. */
.wt-servicos-destaque,
.wt-servicos-grid { align-items: stretch; }

/* 3.4 Parágrafo justificado dentro de bloco CENTRALIZADO.
   Sem text-align-last a última linha encosta à esquerda e quebra o eixo. */
.wt-hero__desc,
.wt-como__text p {
	text-align: justify;
	text-align-last: center;
}

/* 3.5 Coluna estreita mata o justificado. */
@media (max-width: 700px) {
	.wt-legal__body p,
	.wt-legal__body li { text-align: left; }
}

/* =====================================================================
   4. HERO — texto centralizado, medidas em ch
   ===================================================================== */
.wt-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;  /* sem isso a barra do navegador corta no mobile */
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

.wt-hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wt-space-3);
	text-align: center;
}

.wt-hero__title { max-width: 26ch; }
.wt-hero__desc  { max-width: 40ch; margin-inline: auto; }

.wt-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wt-space-2);
	margin-top: var(--wt-space-3);
}

@media (max-width: 600px) {
	.wt-hero__title { max-width: none; }
	/* Os dois CTAs dividem a linha; rótulo pode quebrar */
	.wt-hero__actions .wt-btn {
		flex: 1 1 0;
		min-width: 0;
		padding-inline: 16px;
		white-space: normal;
	}
}

/* =====================================================================
   5. GRIDS DE CONTEÚDO — nunca 50/50
   A coluna de TEXTO define a altura da linha; a imagem se estica
   para acompanhar (absolute dentro de relative, sem aspect-ratio).
   ===================================================================== */
.wt-bloco--texto-imagem  { display: grid; grid-template-columns: 1fr 0.85fr; gap: var(--wt-space-4); align-items: stretch; }
.wt-bloco--imagem-maior  { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--wt-space-4); align-items: stretch; }

.wt-bloco__texto  { display: flex; flex-direction: column; align-items: flex-start; gap: var(--wt-space-2); }
.wt-bloco__media  { position: relative; overflow: hidden; }
.wt-bloco__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
	.wt-bloco--texto-imagem,
	.wt-bloco--imagem-maior { grid-template-columns: 1fr; }
	/* Ao empilhar, o que era coluna à esquerda vira bloco centralizado */
	.wt-bloco__texto { align-items: center; text-align: center; }
	.wt-bloco__media { aspect-ratio: 4 / 3; }
}

/* =====================================================================
   6. FORMULÁRIO E RODAPÉ
   ===================================================================== */
.wt-form { max-width: 760px; margin-inline: auto; }
.wt-form__linha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wt-space-2); }

.wt-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 0.8fr;
	gap: var(--wt-space-4);
	padding-block: var(--wt-space-6);
}
.wt-footer__col { display: flex; flex-direction: column; gap: var(--wt-space-2); }
.wt-footer__marca p { max-width: 32ch; }

@media (max-width: 1024px) {
	.wt-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--wt-space-5); }
}

@media (max-width: 600px) {
	.wt-form__linha  { grid-template-columns: 1fr; }
	.wt-footer__grid { grid-template-columns: 1fr; text-align: center; }
	.wt-footer__col  { align-items: center; }
	.wt-footer__marca p { max-width: none; }
	/* Ícone acima do texto, exceto nas redes sociais */
	.wt-footer__link { flex-direction: column; gap: 6px; }
	.wt-footer__bottom-inner { flex-direction: column; align-items: center; text-align: center; }
}