/* ==========================================================================
   CM Digital — Shared section components
   Used by Problem / Credit Analysis / Método CM (and any future Home
   section) so the page reads as one continuous product, not three
   independently-designed blocks. Kept separate from hero.css on purpose —
   the Hero is approved and frozen.
   ========================================================================== */

.section {
	position: relative;
	background: var(--bg-primary);
	padding-block: var(--space-4xl);
	overflow: hidden;
	/* The header is position:fixed at --header-height tall, so a plain
	   anchor jump lands the section's heading directly under it. This
	   offset keeps the destination visible instead of hidden behind the
	   header on every in-page link that targets a .section (nav, footer
	   nav, and in-copy CTAs like "Ver cómo funciona" / "Quiero analizar
	   mi reporte"). --header-height (84px) covers the un-scrolled header,
	   which is taller than --header-height-scrolled (68px), so this never
	   under-clears once the header has shrunk. */
	scroll-margin-top: calc(var(--header-height) + var(--space-lg));
}

/* A hairline seam at the top of every section but the first (Hero has its
   own edge) — replaces a hard flat cut between sections with a faint
   horizontal thread, echoing the Hero's beam/line motif. */
.section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 10%;
	right: 10%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--border-strong) 50%, transparent);
	z-index: 1;
}

.section__ambient {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.section__ambient::before {
	content: "";
	position: absolute;
	top: -20%;
	left: 50%;
	transform: translateX(-50%);
	width: 60vw;
	height: 40vw;
	max-width: 900px;
	max-height: 500px;
	background: radial-gradient(ellipse, var(--accent-glow-soft) 0%, rgba(47, 111, 255, 0) 70%);
}

/* Faint technical grid, matching the Hero's — kept extremely discreet
   (5% opacity, masked to the top) so it reads as texture, not decoration. */
.section__ambient::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(var(--border) 1px, transparent 1px),
		linear-gradient(90deg, var(--border) 1px, transparent 1px);
	background-size: 64px 64px;
	opacity: 0.04;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 65%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 65%);
}

.section__head {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin-bottom: var(--space-3xl);
}

.section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--accent-300);
	margin-bottom: var(--space-md);
}

.section-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent-400);
	box-shadow: 0 0 12px 2px var(--accent-glow);
}

.section-title {
	font-size: var(--fs-h2);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	text-transform: uppercase;
	color: var(--text-primary);
	margin-bottom: var(--space-lg);
}

.section-title span {
	display: block;
}

.section-title .is-accent {
	color: var(--accent-400);
}

.section-copy {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body);
	color: var(--text-secondary);
	max-width: 56ch;
}

.section-copy + .btn {
	margin-top: var(--space-lg);
}

.section-disclosure {
	position: relative;
	z-index: 1;
	max-width: 72ch;
	margin-top: var(--space-2xl);
	font-size: var(--fs-body-sm);
	line-height: 1.6;
	color: var(--text-tertiary);
}

/* ==========================================================================
   Reveal-on-scroll
   Default state (no class) is always the finished, fully-visible look —
   .reveal-armed (added by JS, only when it's about to animate) is the only
   thing that hides content, so no-JS and prefers-reduced-motion visitors
   never lose anything.
   ========================================================================== */

[data-reveal].reveal-armed {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].reveal-armed.is-visible {
	opacity: 1;
	transform: none;
}