/* ============================================================
   03 · LAYOUT — contenedores, secciones, grids
   ============================================================ */

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

.yk-section { padding-block: var(--yk-pad-y); position: relative; }
.yk-section--tight { padding-block: clamp(40px, 6vw, 80px); }
.yk-section--flush { padding-block: 0; }

.yk-stack > * + * { margin-top: var(--yk-s5); }

.yk-grid { display: grid; gap: var(--yk-s5); }
.yk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.yk-grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

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

.yk-cluster { display: flex; flex-wrap: wrap; gap: var(--yk-s3); align-items: center; }
.yk-center { text-align: center; }
.yk-measure { max-width: 68ch; }


/* ============================================================
   MALLA BLUEPRINT — fondo técnico reutilizable de la marca
   Se aplica a cualquier contenedor: .yk-blueprint
   ============================================================ */
.yk-blueprint { position: relative; }
.yk-blueprint::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: linear-gradient(var(--yk-grid) 1px, transparent 1px),
	                  linear-gradient(90deg, var(--yk-grid) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000 20%, transparent 72%);
	        mask-image: radial-gradient(ellipse at 30% 30%, #000 20%, transparent 72%);
}
.yk-blueprint > * { position: relative; z-index: 2; }