/**
 * ----------------------------------------------------------
 * CYPROS POWER
 * Editorial Layout System
 * ----------------------------------------------------------
 */

:root {
	--cy-layout-section-space: clamp(3.25rem, 4.75vw, 4.75rem);
	--cy-layout-section-space-tight: clamp(2.75rem, 4vw, 4rem);
	--cy-layout-edge: clamp(1.5rem, 4vw, 4.5rem);
	--cy-layout-max: 1480px;
	--cy-layout-line: rgba(17, 17, 17, 0.12);
}

/* ----------------------------------------------------------
 * GLOBAL CONTAINER
 * ---------------------------------------------------------- */

.cy-container {
	width: min(
		calc(100% - (var(--cy-layout-edge) * 2)),
		var(--cy-layout-max)
	);
	margin-inline: auto;
}

/* ----------------------------------------------------------
 * SECTION RHYTHM
 * ---------------------------------------------------------- */

.cy-statement,
.cy-equipment,
.cy-industries,
.cy-process,
.cy-contact {
	position: relative;
}

/*
 * Las secciones claras comparten una cadencia editorial
 * compacta. La intención es que la Home se perciba como una
 * sola narrativa continua y no como páginas apiladas.
 */

.cy-statement,
.cy-equipment,
.cy-process {
	padding-top: var(--cy-layout-section-space);
	padding-bottom: var(--cy-layout-section-space);
}

/*
 * Industrias y Contacto ya generan una transición fuerte de
 * fondo, por lo que requieren ligeramente menos aire.
 */

.cy-industries,
.cy-contact {
	padding-top: var(--cy-layout-section-space-tight);
	padding-bottom: var(--cy-layout-section-space-tight);
}

/* ----------------------------------------------------------
 * CONTINUITY LINES
 * ---------------------------------------------------------- */

.cy-statement::before,
.cy-equipment::before,
.cy-process::before {
	position: absolute;
	top: 0;
	right: var(--cy-layout-edge);
	left: var(--cy-layout-edge);
	height: 1px;
	background: var(--cy-layout-line);
	content: "";
}

/*
 * No duplicamos líneas cuando una sección ya tiene una
 * transición fuerte de color.
 */

.cy-industries::before,
.cy-contact::before {
	display: none;
}

/* ----------------------------------------------------------
 * INTERNAL HEADERS
 * ---------------------------------------------------------- */

.cy-statement__top,
.cy-industries__top,
.cy-process__top,
.cy-contact__top {
	margin-bottom: 0;
}

/* ----------------------------------------------------------
 * SECTION INTRO WIDTHS
 * ---------------------------------------------------------- */

.cy-statement__headline,
.cy-equipment__intro,
.cy-industries__intro,
.cy-process__intro,
.cy-contact__headline {
	min-width: 0;
}

/* ----------------------------------------------------------
 * TEXT RHYTHM
 * ---------------------------------------------------------- */

.cy-statement__content p,
.cy-equipment__intro p,
.cy-industries__intro p,
.cy-process__intro p,
.cy-contact__content p {
	text-wrap: pretty;
}

/* ----------------------------------------------------------
 * DARK SECTION TRANSITIONS
 * ---------------------------------------------------------- */

.cy-industries,
.cy-contact {
	margin-top: 0;
}

/* ----------------------------------------------------------
 * TABLET
 * ---------------------------------------------------------- */

@media (max-width: 68rem) {
	:root {
		--cy-layout-section-space: clamp(3.25rem, 5vw, 4.25rem);
		--cy-layout-section-space-tight: clamp(2.75rem, 4.5vw, 3.75rem);
	}
}

/* ----------------------------------------------------------
 * MOBILE
 * ---------------------------------------------------------- */

@media (max-width: 48rem) {
	:root {
		--cy-layout-edge: 1.25rem;
		--cy-layout-section-space: 3rem;
		--cy-layout-section-space-tight: 2.75rem;
	}

	.cy-statement::before,
	.cy-equipment::before,
	.cy-process::before {
		right: var(--cy-layout-edge);
		left: var(--cy-layout-edge);
	}
}