/*
 * "Somos parte de": Empresas Carozzi y Molitalia, dos líneas que se unen en 1997.
 *
 *   Contenedor              → about-section about-section--dark merge   (ancla #carozzi)
 *     Contenedor            → merge__head
 *       Texto corto         → eyebrow eyebrow--plain eyebrow--light
 *       Título              → merge__title   (<em> pinta en coral la segunda frase)
 *       Texto               → merge__text
 *     Contenedor            → merge__graph
 *       Widget HTML         → merge__lines   (SOLO las líneas decorativas; no contiene textos)
 *       Título (año)        → merge__label merge__label--year merge__label--<posición>
 *       Texto (nombre)      → merge__label merge__label--name merge__label--<posición>
 *       Contenedor vacío    → merge__dot
 *     Contenedor            → merge__stats
 *       Contenedor          → merge__stat
 *         Título (cifra)    → merge__stat-number   (+ count-up para que cuente)
 *         Texto             → merge__stat-label
 *     Contenedor            → merge__foot
 *       Texto               → merge__note
 *       Botón               → btn btn--light merge__button
 *
 * Posiciones: chile-year, chile-name, peru-year, peru-name, joint-year, today (porcentajes sobre el gráfico).
 */

.merge__head { display: block; max-width: 880px; }
.merge__title { padding: 14px 0 18px; }
.merge__title .elementor-heading-title {
	font-family: var(--font-display);
	font-size: clamp(34px, 4.6vw, 66px);
	font-weight: 800;
	letter-spacing: -.045em;
	line-height: 1;
	color: #fff;
}
/* <em> dentro del título (texto editable): segunda frase en coral. */
.merge__title em { font-style: normal; color: #ff6b5e; }
.merge__text { max-width: 38em; font-size: clamp(16px, 1.3vw, 19px); color: rgba(255, 255, 255, .78); }
.merge__text p { margin: 0; }

/* ---- Gráfico: las líneas son un SVG; los años y nombres son widgets posicionados en % ---- */
.merge__graph {
	position: relative;
	display: block;
	width: 100%;
	height: clamp(190px, 24vw, 320px);
	margin: clamp(40px, 5vw, 72px) 0 clamp(40px, 4.4vw, 60px);
}
.merge__lines { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.merge__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.merge__path { fill: none; stroke-linecap: round; }
.merge__path--chile { stroke: rgba(255, 255, 255, .55); stroke-width: 5; }
.merge__path--peru { stroke: var(--color-brand-red); stroke-width: 5; }
.merge__path--joint { stroke: #fff; stroke-width: 12; }

/* Las líneas se dibujan cuando el gráfico entra en pantalla (anim.js agrega .is-in). */
.js-anim .merge__path { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.merge__graph.is-in .merge__path--chile { animation: merge-draw 2.2s .2s var(--ease-out) forwards; }
.merge__graph.is-in .merge__path--peru { animation: merge-draw 1.6s .9s var(--ease-out) forwards; }
.merge__graph.is-in .merge__path--joint { animation: merge-draw 1.4s 2.3s var(--ease-out) forwards; }
@keyframes merge-draw { to { stroke-dashoffset: 0; } }

.merge__label {
	position: absolute;
	width: auto;
	margin: 0;
	white-space: nowrap;
	translate: 0 -50%;
}
.js-anim .merge__label,
.js-anim .merge__dot {
	opacity: 0;
	transition: opacity .6s;
	transition-delay: var(--label-delay, .4s);
}
.merge__graph.is-in .merge__label,
.merge__graph.is-in .merge__dot { opacity: 1; }

.merge__label--year .elementor-heading-title {
	font-family: var(--font-display);
	font-size: clamp(15px, 1.8vw, 26px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: #fff;
}
.merge__label--name {
	font-size: clamp(11px, 1vw, 14px);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .65);
}
.merge__label--name p { margin: 0; }

.merge__label--chile-year { left: 4%; top: 16%; }
.merge__label--chile-name { left: 4%; top: 2%; }
.merge__label--peru-year { left: 51.4%; top: 76%; --label-delay: 1.1s; }
.merge__label--peru-year .elementor-heading-title { color: #ff6b5e; }
.merge__label--peru-name { left: 51.4%; top: 100%; --label-delay: 1.1s; color: #ff8a80; }
.merge__label--joint-year { left: 75.2%; top: 30%; translate: -50% -50%; --label-delay: 2.2s; }
.merge__label--today { left: 96%; top: 40%; translate: -100% -50%; --label-delay: 3.4s; }

.merge__dot {
	position: absolute;
	left: 75.2%;
	top: 57.7%;
	width: clamp(18px, 2vw, 28px);
	min-height: 0;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--color-brand-red);
	box-shadow: 0 0 0 8px rgba(215, 38, 30, .3), 0 0 0 18px rgba(215, 38, 30, .12);
	translate: -50% -50%;
	--label-delay: 2.2s;
}
.merge__graph.is-in .merge__dot { animation: merge-beat 2s 2.4s ease-in-out infinite; }
@keyframes merge-beat { 50% { box-shadow: 0 0 0 12px rgba(215, 38, 30, .35), 0 0 0 26px rgba(215, 38, 30, .1); } }

/* ---- Cifras ---- */
.merge__stats {
	--row-gap: 8px;
	--column-gap: 0;

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid rgba(255, 255, 255, .16);
}
.merge__stat { display: block; padding: 22px 22px 6px 0; }
.merge__stat:nth-child(even) { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .16); }
.merge__stat-number .elementor-heading-title {
	font-family: var(--font-display);
	font-size: clamp(40px, 4.6vw, 66px);
	font-weight: 800;
	letter-spacing: -.055em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: #fff;
}
.merge__stat-label { max-width: 15em !important; /* Elementor fija max-width:100% */ padding-top: 8px; font-size: 15px; color: rgba(255, 255, 255, .7); }
.merge__stat-label p { margin: 0; }

.merge__foot {
	--row-gap: 12px;
	--column-gap: 18px;

	display: flex;
	flex-direction: row !important; /* Elementor fija la dirección con más especificidad */
	flex-wrap: wrap;
	align-items: center;
	margin-top: clamp(28px, 3vw, 40px);
}
.merge__note { width: auto; flex: 0 1 auto; font-size: 14px; color: rgba(255, 255, 255, .6); }
.merge__note p { margin: 0; }
.merge__button { width: auto; flex: none; }

@media (min-width: 768px) {
	.merge__label--joint-year { top: 38%; }
	.merge__label--today { top: 45%; }
}

@media (min-width: 1025px) {
	.merge__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.merge__stat + .merge__stat { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .16); }
	.merge__button { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.js-anim .merge__path { stroke-dashoffset: 0; animation: none; }
	.js-anim .merge__label,
	.js-anim .merge__dot { opacity: 1; transition: none; }
	.merge__graph.is-in .merge__path,
	.merge__graph.is-in .merge__dot { animation: none; }
}