/* ═══════════════════════════════════════════════════════════════
 * MCCI · Base — reset + tipografía + utilities + reveal
 * ═══════════════════════════════════════════════════════════════ */

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
	font-family: var(--f-body);
	background: var(--c-bg-1);
	color: var(--c-text);
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}
body.menu-open { overflow: hidden; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }

/* Lazy fade-in for all images (driven by runtime.js .loaded toggle).
 * Why: el blur(12px) global aplicado a TODAS las imágenes era una de las
 * propiedades CSS más caras en iOS Safari (forzaba una compositing layer +
 * cómputo de blur en GPU por cada <img>). En páginas con muchas imágenes
 * (HOME, single-promocion) agotaba el layer budget de iOS y crasheaba el
 * renderer al scrollear hacia arriba. Lo limitamos a opacity-only globalmente;
 * las imágenes que necesitan el efecto blur lo activan vía .img-blur-reveal. */
img {
	opacity: 0;
	transition: opacity 0.6s var(--ease-out);
}
img.loaded { opacity: 1; }

/* Opt-in blur reveal — sólo aplicar a imágenes hero/destacadas vía clase. */
.img-blur-reveal img {
	filter: blur(12px);
	transition: opacity 0.6s var(--ease-out), filter 0.9s var(--ease-out);
}
.img-blur-reveal img.loaded { filter: blur(0); }

/* Typographic primitives compartidos */
.section-tag {
	font-family: var(--f-mono);
	font-size: 0.62rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-accent);
	margin-bottom: 1.5rem;
	display: inline-block;
}
.section-title {
	font-family: var(--f-display);
	font-weight: 800;
	font-stretch: 85%;
	font-size: clamp(1.7rem, 3.2vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--c-text);
	max-width: 780px;
	margin-bottom: 1.5rem;
}
.section-intro {
	font-family: var(--f-body);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.8;
	color: var(--c-text-mid);
	max-width: 580px;
}

/* Reveal on scroll (driven by runtime.js IntersectionObserver) */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.vis { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }

/* Image reveal mask */
.img-reveal { position: relative; overflow: hidden; }
.img-reveal::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--c-bg-1);
	z-index: 2;
	transform: scaleY(1);
	transform-origin: top;
	transition: transform 1.2s var(--ease-out);
}
.img-reveal.vis::before { transform: scaleY(0); transform-origin: bottom; }
.img-reveal img { transform: scale(1.18); transition: transform 1.8s var(--ease-out); }
.img-reveal.vis img { transform: scale(1); }
.img-reveal--dark::before { background: var(--c-dark); }

/* Buttons compartidos (originalmente btn-primary, btn-ghost, btn-outline, btn-submit, arrow) */
.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	font-family: var(--f-mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-dark);
	background: var(--c-bg-1);
	padding: 0.9rem 1.75rem;
	border: none;
	cursor: pointer;
	transition: all 0.4s var(--ease);
}
.btn-primary:hover { background: #fff; transform: translateY(-1px); }

.btn-ghost {
	font-family: var(--f-mono);
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(245,243,238,0.6);
	border-bottom: 1px solid rgba(245,243,238,0.2);
	padding-bottom: 3px;
	transition: all 0.3s ease;
}
.btn-ghost:hover { color: var(--c-inverse); border-color: rgba(245,243,238,0.5); }

.btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--f-mono);
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-text);
	padding: 0.85rem 0;
	border: none;
	background: none;
	cursor: pointer;
	border-bottom: 1px solid var(--c-text);
	transition: all 0.3s ease;
}
.btn-outline:hover { color: var(--c-accent); border-color: var(--c-accent); }

.btn-submit {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	font-family: var(--f-mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-inverse);
	background: var(--c-dark);
	padding: 1rem 2rem;
	border: none;
	cursor: pointer;
	margin-top: 1.75rem;
	transition: all 0.4s var(--ease);
}
.btn-submit:hover { background: var(--c-accent); transform: translateY(-1px); }

.arrow { transition: transform 0.3s ease; display: inline-block; }
*:hover > .arrow { transform: translateX(3px); }

/* Skip link */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--c-dark);
	color: var(--c-inverse);
	padding: 0.6rem 1rem;
	font-family: var(--f-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	z-index: 1000;
	transition: top 0.3s ease;
}
.skip-link:focus { top: 0; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.reveal { opacity: 1; transform: none; }
	.img-reveal::before { transform: scaleY(0); }
	.img-reveal img { transform: none; }
}

/* Editor placeholder helpers */
.mcci-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	background: #1a1d22;
}

/* Responsive base */
@media (max-width: 480px) {
	.section-title { font-size: 1.5rem; }
}