/* ============================================================
   Layout — container, seções, superfícies e texturas
   ============================================================ */

.container {
	width: 100%;
	max-width: var(--largura);
	margin-inline: auto;
	padding-inline: var(--pad-x);
}

.container--estreito {
	max-width: var(--largura-estreita);
}

.secao {
	position: relative;
	padding-block: var(--secao-y);
	isolation: isolate;
}

.secao--compacta {
	padding-block: clamp(3rem, 6vw, 5.5rem);
}

/* Superfície clara para seções de produto */
.secao--clara {
	background: var(--fundo-claro);
	color: var(--texto-escuro);
}

.secao--clara .secao-texto,
.secao--clara .texto-suave {
	color: var(--texto-escuro-suave);
}

.secao--alt {
	background: var(--fundo-alt);
}

/* Grid utilitário */
.grade {
	display: grid;
	gap: var(--gap);
}

.grade--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grade--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grade--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.grade--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.grade--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.grade--2,
	.grade--3,
	.grade--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

@media (max-width: 900px) {
	.split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Texturas de fundo ---------- */

/* Grid técnico / blueprint */
.textura-grid {
	overflow: clip;
}

.textura-grid::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: linear-gradient(rgba(201, 209, 218, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(201, 209, 218, 0.06) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
	pointer-events: none;
}

.secao--clara.textura-grid::before {
	background-image: linear-gradient(rgba(10, 23, 48, 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(10, 23, 48, 0.055) 1px, transparent 1px);
}

/* Halo de luz de acento */
.textura-halo {
	overflow: clip;
}

.textura-halo::after {
	content: "";
	position: absolute;
	z-index: -2;
	width: min(760px, 90vw);
	aspect-ratio: 1;
	right: -14%;
	top: -18%;
	background: radial-gradient(circle, rgba(var(--acento-rgb), 0.16) 0%, transparent 66%);
	pointer-events: none;
}

/* Chanfro estrutural (vocabulário Perfil) */
.chanfro {
	clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}

/* Divisor com corte a laser */
.divisor-laser {
	position: relative;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--borda) 12%, var(--borda) 88%, transparent);
	overflow: visible;
}

.divisor-laser::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 90px;
	height: 2px;
	transform: translateY(-50%);
	background: linear-gradient(90deg, transparent, var(--acento-claro), #fff, var(--acento-claro), transparent);
	filter: drop-shadow(0 0 6px rgba(var(--acento-rgb), 0.9));
	animation: correr-laser 7s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}

@keyframes correr-laser {
	0%,
	12% {
		left: -10%;
		opacity: 0;
	}
	18% {
		opacity: 1;
	}
	82% {
		opacity: 1;
	}
	100% {
		left: 100%;
		opacity: 0;
	}
}

/* Faixa de rodapé de seção */
.faixa-marca {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--fonte-titulo);
	font-size: var(--t-micro);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--texto-fraco);
}

.faixa-marca::before,
.faixa-marca::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--borda);
}