/* =============================================================
 * Section 2 — "Tu negocio funciona. Pero está repartido."
 *
 * Layout 2-col en desktop:
 *   ┌──────────────────────┬──────────────────────┐
 *   │ eyebrow              │ ┌─card─┐ ┌─card─┐    │
 *   │ headline (2 líneas)  │ ├──────┤ ├──────┤    │
 *   │ lead                 │ ├─card─┤ ├─card─┤    │
 *   │ [visual placeholder] │ ├──────┤ ├──────┤    │
 *   │                      │ └─card─┘ └─card─┘    │
 *   └──────────────────────┴──────────────────────┘
 *      [divider con arrow + Trinocex statement]
 *
 * En tablet/mobile el grid colapsa a una columna.
 *
 * Paleta sobre el cream tostado:
 *   --pain-ink         oklch(18% 0.022 60)   texto cool-dark
 *   --pain-ink-soft    oklch(38% 0.022 50)   secundario
 *   --pain-accent      oklch(55% 0.18 30)    terracota desaturado (eyebrow, Trinocex, icons)
 *   --pain-card-bg     oklch(98% 0.008 78)   un punto más claro que paper (cards)
 *   --pain-card-border oklch(88% 0.015 80)   borde sutil
 *   --pain-icon-bg     oklch(92% 0.045 30)   círculo del icono (rosado cream)
 * ============================================================= */

.trx-pain {
	--pain-ink:         oklch(18% 0.022 60);
	--pain-ink-soft:    oklch(38% 0.022 50);
	--pain-accent:      oklch(55% 0.18 30);
	--pain-card-bg:     oklch(98% 0.008 78);
	--pain-card-border: oklch(88% 0.015 80);
	--pain-icon-bg:     oklch(92% 0.045 30);

	/* min-height: 100dvh viene del .trx-section base.
	 * Padding compacto + cap de imagen para que todo encaje sin scroll. */
	padding-block: clamp(var(--trx-space-6), 4vh, var(--trx-space-7));
}

.trx-pain__inner {
	width: 100%;
	max-width: 1600px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 2vw, 2.5rem);
}

/* GRID 2-COL --------------------------------------------------- */
.trx-pain__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 3.5rem);
	align-items: start;
}

/* LEFT COLUMN -------------------------------------------------- */
.trx-pain__left {
	display: flex;
	flex-direction: column;
	gap: var(--trx-space-4);
	text-align: left;
}

.trx-pain__eyebrow {
	margin: 0;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
	font-weight: 500;
	letter-spacing: 0.14em;
	color: var(--pain-accent);
}

.trx-pain__headline {
	margin: 0;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: clamp(2rem, 1.5rem + 2.8vw, 4rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--pain-ink);
}

.trx-pain__lead {
	margin: 0;
	max-width: 50ch;
	font-size: clamp(1rem, 0.92rem + 0.35vw, 1.125rem);
	font-weight: 400;
	line-height: 1.55;
	color: var(--pain-ink-soft);
	text-wrap: pretty;
}
.trx-pain__lead strong {
	font-weight: 600;
	color: var(--pain-ink);
}

/* VISUAL — la imagen ya trae fondo cream, integra sin contenedor visible.
 * Cap por max-height (vh) para que en viewports compactos no haga overflow
 * y la sección entera quepa en 100dvh sin scroll. */
.trx-pain__visual {
	margin: var(--trx-space-2) 0 0;
	padding: 0;
	width: 100%;
	max-height: 42vh;
	display: flex;
	justify-content: flex-start;
}
.trx-pain__visual img {
	width: auto;
	height: 100%;
	max-width: 100%;
	max-height: 42vh;
	object-fit: contain;
	display: block;
}

/* RIGHT COLUMN — CARDS ---------------------------------------- */
.trx-pain__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1rem, 1.5vw, 1.5rem);
	align-self: center;
}

.trx-pain__item {
	display: flex;
	flex-direction: column;
	gap: var(--trx-space-3);
	padding: clamp(1.25rem, 1.5vw, 1.75rem);
	background: var(--pain-card-bg);
	border: 1px solid var(--pain-card-border);
	border-radius: var(--trx-radius-lg);
	transition:
		transform var(--trx-dur-base) var(--trx-ease-soft),
		border-color var(--trx-dur-base) var(--trx-ease-soft),
		box-shadow var(--trx-dur-base) var(--trx-ease-soft);
}
.trx-pain__item:hover {
	transform: translateY(-3px);
	border-color: oklch(80% 0.04 50);
	box-shadow: 0 10px 28px oklch(30% 0.02 60 / 0.08);
}

.trx-pain__item-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--pain-icon-bg);
	color: var(--pain-accent);
	flex-shrink: 0;
}
.trx-pain__item-icon svg {
	width: 26px;
	height: 26px;
}

.trx-pain__item-title {
	margin: var(--trx-space-2) 0 0;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.005em;
	color: var(--pain-ink);
}

.trx-pain__item-desc {
	margin: 0;
	font-size: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
	line-height: 1.5;
	color: var(--pain-ink-soft);
}

/* BOTTOM — divider con arrow + statement de transición --------- */
.trx-pain__bottom {
	margin-top: clamp(var(--trx-space-6), 5vh, var(--trx-space-8));
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.trx-pain__bottom-divider {
	position: relative;
	width: 100%;
	max-width: 800px;
	height: 1px;
	background: var(--pain-card-border);
	margin-bottom: var(--trx-space-5);
}
.trx-pain__bottom-arrow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	background: oklch(95% 0.018 78);
	border: 1px solid var(--pain-card-border);
	border-radius: 50%;
	color: var(--pain-accent);
}
.trx-pain__bottom-arrow svg {
	width: 20px;
	height: 20px;
}

.trx-pain__bottom-headline {
	margin: 0;
	max-width: 800px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: clamp(1.25rem, 1rem + 1.1vw, 1.875rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--pain-ink);
}
.trx-pain__bottom-headline strong {
	color: var(--pain-accent);
	font-weight: 700;
}

.trx-pain__bottom-sub {
	margin: var(--trx-space-4) 0 0;
	max-width: 56ch;
	font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
	line-height: 1.55;
	color: var(--pain-ink-soft);
}

/* RESPONSIVE -------------------------------------------------- */
@media (max-width: 980px) {
	.trx-pain__grid {
		grid-template-columns: 1fr;
		gap: var(--trx-space-8);
	}
	.trx-pain__list {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 600px) {
	.trx-pain__list {
		grid-template-columns: 1fr;
	}
}

/* REVEAL (entrada por scroll) --------------------------------- */
.trx-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 700ms var(--trx-ease),
		transform 700ms var(--trx-ease);
	transition-delay: calc(var(--i, 0) * 70ms);
}
.trx-reveal.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.trx-reveal { opacity: 1; transform: none; transition: none; }
	.trx-pain__item { transition: none; }
	.trx-pain__item:hover { transform: none; }
}