/* ==========================================================================
   Michel Gallero — Página EXPERIENCIAS
   Estilos propios (namespace .exp-*). Reutiliza tokens/header/btn/footer
   de main.css. No editar main.css ni otras páginas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO — full-bleed con el título horneado en el PNG de fondo
   -------------------------------------------------------------------------- */
.exp-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 100vh;
	min-height: 100svh;
	background: url("../../images/experiencias-hero-bw-2.jpg") no-repeat center center;
	background-size: cover;
	display: flex;
	flex-direction: column;
}
.exp-hero__inner {
	position: relative;   /* sin z-index: que el título mezcle (difference) contra la foto */
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;   /* contenido abajo */
	align-items: center;
	text-align: center;
	padding-top: 120px;   /* sin tocar el padding lateral del mg-container (gutter) */
	padding-bottom: 40px;
}
.exp-hero__title {
	width: 100%;
	margin: 0 0 36px;     /* título arriba del texto, como Biografía */
	line-height: 0;
}
.exp-hero__title-svg {
	display: block; width: 100%; height: auto; overflow: visible;
	mix-blend-mode: difference;
}
.exp-hero__title-svg text { font-family: var(--mg-font-place); fill: #fff; }
.exp-hero__cols {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 780px;
	margin: 0 auto;
}
.exp-hero__cols p {
	font-family: var(--mg-font-body);
	font-size: var(--mg-text-size);
	line-height: 1.7;
	color: var(--mg-text);
	margin: 0;
}
/* degradado inferior para fundir con el cuerpo negro */
.exp-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;   /* velo detrás del contenido → el título mezcla (difference) contra la foto */
	background: linear-gradient(to bottom, rgba(13, 11, 13, 0.6) 0%, rgba(13, 11, 13, 0.64) 48%, rgba(13, 11, 13, 0.86) 80%, var(--mg-bg) 100%);
	pointer-events: none;
}
.exp-hero__eyebrow { justify-content: flex-start; margin: 0 0 26px; }
.exp-hero__logos {
	position: relative;
	z-index: 2;
	padding: 26px 0; /* mismo aire que la banda del Home (antes 44/48 → se sentía más grande) */
	/* línea superior de la banda (la inferior es el border-top del primer .exp-block) */
	border-top: 1px solid var(--mg-line);
}
.exp-hero__logos-label {
	font-family: var(--mg-font-narrow);
	font-weight: 500; font-size: 11px; letter-spacing: 2.5px;
	text-transform: uppercase; color: var(--mg-muted);
	margin: 0 0 24px;
}
/* Logos individuales (un <img> por marca). NO comparten altura: cada --logo-scale sale del
   modelo óptico medido (proporción^-0.35 × densidad^-0.25). CLAVE: se normaliza contra la
   MISMA referencia que el Home (su mediana raw = 1.0765), NO contra la mediana de este set.
   Así un logo con igual proporción+densidad mide igual en ambas bandas (antes Exp salía ~15%
   más grande porque cada set se normalizaba a su propia mediana). base = misma que Home.
   Cálculo reproducible en scratchpad/optics_exp.py. */
.exp-hero__logos-img {
	--logo-base: clamp(30px, 3.4vw, 40px); /* misma base que el Home */
	--logo-scale: 1;
	display: block;
	height: calc(var(--logo-base) * var(--logo-scale));
	width: auto;
	max-width: calc(var(--logo-base) * 3.4); /* guardrail de ancho (los muy anchos bajan de alto) */
	object-fit: contain;
	opacity: 0.9;
}
.exp-hero__logos .mg-marquee__group { gap: 48px; padding-right: 48px; }
/* misma velocidad PERCIBIDA que el Home (82 px/s): grupo ≈ 3932px / 48s.
   (Home = 2053px / 25s = 82 px/s; px/s = ancho de grupo / duración.) */
.exp-hero__logos .mg-marquee__track { animation-duration: 48s; }

/* Escalas ópticas por logo (medidas, ref común con Home). Los −10% son nudges manuales tuyos. */
.exp-hero__logos-img--camara-comercio-cali { --logo-scale: 1.30; }
.exp-hero__logos-img--cumbe                { --logo-scale: 1.30; }
.exp-hero__logos-img--kia-south-dade       { --logo-scale: 1.30; }
.exp-hero__logos-img--lidotel              { --logo-scale: 1.30; }
.exp-hero__logos-img--paris-2024           { --logo-scale: 1.30; }
.exp-hero__logos-img--profit4life          { --logo-scale: 1.30; }
.exp-hero__logos-img--warner-bros          { --logo-scale: 1.23; }
.exp-hero__logos-img--invermedia           { --logo-scale: 1.15; }
.exp-hero__logos-img--vision-world         { --logo-scale: 1.07; }
.exp-hero__logos-img--casa-luker           { --logo-scale: 1.03; }
.exp-hero__logos-img--alpina               { --logo-scale: 0.98; } /* nudge manual −10% */
.exp-hero__logos-img--copa-airlines        { --logo-scale: 0.97; }
.exp-hero__logos-img--corporacion-capi     { --logo-scale: 0.92; }
.exp-hero__logos-img--admazing             { --logo-scale: 0.85; }
.exp-hero__logos-img--exma                 { --logo-scale: 0.86; }
.exp-hero__logos-img--fitch-ratings        { --logo-scale: 0.83; }
.exp-hero__logos-img--pepsi                { --logo-scale: 0.82; }
.exp-hero__logos-img--warner-music         { --logo-scale: 0.82; }
.exp-hero__logos-img--zeven                { --logo-scale: 0.82; } /* nudge manual −10% */
.exp-hero__logos-img--ciisa                { --logo-scale: 0.78; }
.exp-hero__logos-img--didi                 { --logo-scale: 0.78; } /* nudge manual −10% */
.exp-hero__logos-img--motorola             { --logo-scale: 0.74; }
.exp-hero__logos-img--purolomo             { --logo-scale: 0.74; }
.exp-hero__logos-img--pawer                { --logo-scale: 0.69; }
.exp-hero__logos-img--rimas                { --logo-scale: 0.69; }
.exp-hero__logos-img--citibanamex          { --logo-scale: 0.68; }
.exp-hero__logos-img--south-dade-rent      { --logo-scale: 0.67; }
.exp-hero__logos-img--colgate              { --logo-scale: 0.66; } /* nudge manual −10% */
.exp-hero__logos-img--famosos              { --logo-scale: 0.63; }

/* --------------------------------------------------------------------------
   BLOQUES — sticky-scroll (imagen pinned) + texto legible, lados alternados
   -------------------------------------------------------------------------- */
.exp-block {
	background: var(--mg-bg);
	padding-block: 100px;
	border-top: 1px solid var(--mg-line);
	scroll-margin-top: 120px; /* el ancla no queda tapada por el header fijo */
}
.exp-block:last-of-type { padding-bottom: 130px; }

.exp-block__grid {
	display: grid;
	grid-template-columns: 0.92fr 1.08fr; /* imagen | texto (texto más ancho = legible) */
	gap: 100px;
	align-items: start;
}
.exp-block--rev .exp-block__grid { grid-template-columns: 1.08fr 0.92fr; }
.exp-block--rev .exp-block__media { order: 2; }
.exp-block--rev .exp-block__text { order: 1; }

/* media fija (pin) mientras el texto scrollea; slideshow con crossfade lento */
.exp-block__media { position: sticky; top: 110px; }
.exp-slides {
	position: relative; width: 100%;
	aspect-ratio: 4 / 5; overflow: hidden;
	background: var(--mg-bg);
}
.exp-slide {
	position: absolute; inset: 0;
	width: 100%; height: 100%; display: block;
	object-fit: cover;
	opacity: 0; transition: opacity 1.4s ease;
	will-change: opacity;
}
.exp-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.exp-slide { transition: none; }
}

.exp-block__text { max-width: 640px; }
.exp-block__text .mg-eyebrow { margin-bottom: 26px; }

.exp-title {
	font-family: var(--mg-font-display);
	font-weight: 700;
	font-size: clamp(34px, 3.4vw, 52px);
	line-height: 1.04;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--mg-white);
	margin: 0 0 30px;
}
/* lead — primer párrafo destacado, blanco y más grande */
.exp-lead {
	font-family: var(--mg-font-body);
	font-size: var(--mg-text-size);
	line-height: 1.72;
	color: var(--mg-white);
	margin: 0 0 30px;
}
.exp-body p {
	font-family: var(--mg-font-body);
	font-size: var(--mg-text-size);
	line-height: 1.72;
	color: var(--mg-text);
	margin: 0 0 22px;
}
.exp-body p:last-child { margin-bottom: 0; }

.exp-label {
	font-family: var(--mg-font-narrow);
	font-weight: 600; font-size: 13px; letter-spacing: 2px;
	text-transform: uppercase; color: var(--mg-yellow);
	margin: 46px 0 4px;
}
.exp-list { margin: 0 0 40px; }
.exp-list li {
	font-family: var(--mg-font-body);
	font-size: var(--mg-text-size-sm); line-height: 1.3;
	color: var(--mg-text);
	padding: 20px 0;
	border-bottom: 1px solid var(--mg-line);
}
.exp-closing {
	font-family: var(--mg-font-display);
	font-weight: 600; font-size: 22px; line-height: 1.4;
	letter-spacing: 0.3px; text-transform: uppercase;
	color: var(--mg-muted); margin: 0 0 38px;
}

/* CTA — etiqueta con gradiente dorado */
.exp-cta .mg-btn__label,
.exp-cta .mg-btn__arrow {
	background: linear-gradient(135deg, #997b3b 0%, #ffcd63 100%);
}

@media (max-width: 860px) {
	.exp-block__grid,
	.exp-block--rev .exp-block__grid { grid-template-columns: 1fr; gap: 36px; }
	.exp-block__media { position: static; }
	.exp-block--rev .exp-block__media { order: 0; }
	/* Móvil: logos a base 30px → grupo más chico y marquee más lento (~69 px/s).
	   Bajamos la duración para que vaya más rápido (~100 px/s), igual que el Home. */
	.exp-hero__logos .mg-marquee__track { animation-duration: 33s; }
}
@media (max-width: 600px) {
	/* Ritmo vertical móvil: reducción moderada (~40-45%) */
	.exp-hero__inner { padding-top: 80px; }
	.exp-block { padding-block: 64px; }
	.exp-block:last-of-type { padding-bottom: 80px; }
}