/* ============================================================
   experiencia.css · Página showcase inmersiva (vanilla + GSAP)

   3 efectos scroll-driven:
   1. Scroll Expansion Hero
   2. Zoom Parallax (7 imágenes)
   3. Sticky Section Tabs
   ============================================================ */

:root {
	--xp-ink:    #06060c;
	--xp-ink-2:  #0c0a1a;
	--xp-fg:     #f5f3ff;
	--xp-muted:  #9690b8;
	--xp-red:    #e0473d;
	--xp-radius: 16px;
	--xp-ease:   cubic-bezier(.22,.61,.36,1);
}

html, body { overflow-x: hidden; background: var(--xp-ink); }
html.lenis { scroll-behavior: auto; }

.xp-root {
	background: var(--xp-ink);
	color: var(--xp-fg);
	font-family: 'Roboto', system-ui, sans-serif;
	overflow: hidden;
}
.xp-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
	width: 100%;
	box-sizing: border-box;
}

/* Tipografía compartida */
.xp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'Roboto Mono', monospace;
	font-size: 11px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--xp-muted);
	margin: 0 0 22px;
}
.xp-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--xp-red);
	box-shadow: 0 0 12px rgba(224,71,61,.6);
	animation: xp-pulse 1.9s infinite;
}
@keyframes xp-pulse {
	0%,100% { box-shadow: 0 0 0 0 rgba(224,71,61,.6); }
	50%     { box-shadow: 0 0 0 9px rgba(224,71,61,0); }
}
.xp-h2 {
	font-size: clamp(34px, 5vw, 76px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.035em;
	margin: 0;
	text-wrap: balance;
}
.xp-h2 em {
	font-style: italic;
	color: var(--xp-red);
}
.xp-accent { color: var(--xp-red); }
.xp-lead {
	color: var(--xp-muted);
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.6;
	max-width: 540px;
	margin: 24px 0 0;
}


/* ============================================================
   1. SCROLL EXPANSION HERO
   ============================================================ */
.xp-expand {
	position: relative;
	height: 300vh;          /* margen de scroll para el pin */
	background: var(--xp-ink);
}
.xp-expand__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	width: 100%;
	overflow: hidden;
	display: grid;
	place-items: center;
}

/* Fondo full-screen que se desvanece */
.xp-expand__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	will-change: opacity;
}
.xp-expand__bg img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.xp-expand__bg-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6,6,12,.4), rgba(6,6,12,.7));
}

/* Media central que crece de pequeño a fullscreen */
.xp-expand__media {
	position: relative;
	z-index: 2;
	width: 300px;
	height: 400px;
	border-radius: var(--xp-radius);
	overflow: hidden;
	box-shadow: 0 40px 100px -20px rgba(0,0,0,.8);
	will-change: width, height;
}
.xp-expand__media img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.xp-expand__media-veil {
	position: absolute;
	inset: 0;
	background: rgba(6,6,12,.35);
	will-change: opacity;
}

/* Título dividido en dos mitades que se separan */
.xp-expand__titles {
	position: absolute;
	z-index: 3;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .1em;
	pointer-events: none;
	mix-blend-mode: difference;
}
.xp-expand__word {
	font-family: 'Kanit', sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: clamp(60px, 12vw, 180px);
	line-height: 1;
	letter-spacing: -.03em;
	will-change: transform;
}

.xp-expand__cue {
	position: absolute;
	bottom: 36px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	font-family: 'Roboto Mono', monospace;
	font-size: 12px;
	letter-spacing: .2em;
	color: var(--xp-fg);
	text-transform: uppercase;
	animation: xp-bob 2s ease-in-out infinite;
}
@keyframes xp-bob {
	0%,100% { transform: translate(-50%,0); opacity: 1; }
	50%     { transform: translate(-50%,8px); opacity: .4; }
}

/* Contenido que aparece tras la expansión */
.xp-expand__content {
	position: absolute;
	z-index: 4;
	left: 50%;
	bottom: 12%;
	transform: translateX(-50%);
	max-width: 640px;
	text-align: center;
	opacity: 0;
	will-change: opacity, transform;
}
.xp-expand__content .xp-eyebrow,
.xp-expand__content .xp-lead { margin-inline: auto; }
.xp-expand__content .xp-eyebrow { justify-content: center; }


/* ============================================================
   2. ZOOM PARALLAX
   ============================================================ */
.xp-zoom {
	position: relative;
	background: var(--xp-ink);
}
.xp-zoom__intro {
	text-align: center;
	padding: clamp(80px,12vw,160px) 24px 0;
}
.xp-zoom__intro .xp-eyebrow { justify-content: center; }

/* Contenedor alto = recorrido de scroll del zoom */
.xp-zoom__stage {
	position: relative;
	height: 300vh;
}
.xp-zoom__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}

/* Cada imagen: wrapper centrado que escala (GSAP pone --s) */
.xp-zoom__item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: transform;
}
.xp-zoom__frame {
	position: relative;
	width: 25vw;
	height: 25vh;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 20px 50px -15px rgba(0,0,0,.6);
}
.xp-zoom__frame img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.xp-zoom__caption {
	position: absolute;
	left: 10px; bottom: 8px;
	font-family: 'Roboto Mono', monospace;
	font-size: 10px;
	letter-spacing: .05em;
	color: #fff;
	background: rgba(0,0,0,.55);
	padding: 3px 8px;
	border-radius: 6px;
	backdrop-filter: blur(4px);
}

/* Posiciones específicas por imagen (réplica del componente original).
   Cambian el tamaño/posición del frame interno. */
.xp-zoom__item[data-i="1"] .xp-zoom__frame { position: relative; top: -30vh; left: 5vw;     height: 30vh; width: 35vw; }
.xp-zoom__item[data-i="2"] .xp-zoom__frame { position: relative; top: -10vh; left: -25vw;   height: 45vh; width: 20vw; }
.xp-zoom__item[data-i="3"] .xp-zoom__frame { position: relative; left: 27.5vw;              height: 25vh; width: 25vw; }
.xp-zoom__item[data-i="4"] .xp-zoom__frame { position: relative; top: 27.5vh; left: 5vw;    height: 25vh; width: 20vw; }
.xp-zoom__item[data-i="5"] .xp-zoom__frame { position: relative; top: 27.5vh; left: -22.5vw;height: 25vh; width: 30vw; }
.xp-zoom__item[data-i="6"] .xp-zoom__frame { position: relative; top: 22.5vh; left: 25vw;   height: 15vh; width: 15vw; }


/* ============================================================
   3. STICKY SECTION TABS
   ============================================================ */
.xp-tabs {
	position: relative;
	background: var(--xp-ink-2);
}
.xp-tabs__intro {
	text-align: center;
	padding: clamp(100px,14vw,180px) 24px clamp(40px,6vw,80px);
}
.xp-tabs__intro .xp-eyebrow { justify-content: center; }

.xp-tab {
	position: relative;
	background: var(--xp-ink-2);
}
/* Header que se queda pegado arriba y se apila */
.xp-tab__header {
	position: sticky;
	top: 0;
	z-index: calc(10 + var(--tab-i));
	background: var(--xp-ink);
	border-top: 1px solid rgba(255,255,255,.1);
	border-bottom: 1px solid rgba(255,255,255,.1);
}
.xp-tab__header-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 22px 32px;
}
.xp-tab__num {
	font-family: 'Kanit', sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: 28px;
	color: var(--tab-accent);
	line-height: 1;
}
.xp-tab__title {
	font-size: clamp(22px, 3vw, 40px);
	font-weight: 700;
	margin: 0;
	letter-spacing: -.02em;
	flex: 1;
}
.xp-tab__time {
	font-family: 'Roboto Mono', monospace;
	font-size: 12px;
	letter-spacing: .2em;
	color: var(--tab-accent);
	padding: 5px 12px;
	border: 1px solid currentColor;
	border-radius: 999px;
}
.xp-tab__body {
	background: var(--xp-ink-2);
}
.xp-tab__body-inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
	align-items: center;
	padding: clamp(48px,8vw,110px) 32px;
}
.xp-tab__text {
	font-size: clamp(18px, 2vw, 26px);
	line-height: 1.5;
	color: var(--xp-fg);
	margin: 0;
	max-width: 640px;
}
.xp-tab__viz {
	position: relative;
	height: 160px;
	display: grid;
	place-items: center;
}
.xp-tab__pulse {
	position: absolute;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 2px solid var(--tab-accent);
	opacity: 0;
	animation: xp-ring 3s ease-out infinite;
}
.xp-tab__pulse:nth-child(2) { animation-delay: 1s; }
.xp-tab__pulse:nth-child(3) { animation-delay: 2s; }
@keyframes xp-ring {
	0%   { opacity: .9; transform: scale(.4); }
	100% { opacity: 0;  transform: scale(4); }
}


/* ============================================================
   OUTRO CTA
   ============================================================ */
.xp-outro {
	background: radial-gradient(ellipse at center top, rgba(224,71,61,.18), transparent 60%), var(--xp-ink);
	padding: clamp(100px,14vw,180px) 0;
	text-align: center;
}
.xp-outro__inner { max-width: 760px; }
.xp-outro__ctas {
	display: inline-flex;
	gap: 14px;
	margin-top: 36px;
	flex-wrap: wrap;
	justify-content: center;
}
.xp-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 28px;
	border-radius: 999px;
	font-weight: 500;
	font-size: 15px;
	text-decoration: none;
	transition: transform .25s var(--xp-ease), box-shadow .25s;
}
.xp-btn--primary {
	background: var(--xp-red);
	color: #fff;
	box-shadow: 0 12px 30px -10px rgba(224,71,61,.6);
}
.xp-btn--primary:hover { transform: translateY(-2px); }
.xp-btn--ghost {
	color: var(--xp-fg);
	border: 1px solid rgba(255,255,255,.2);
}
.xp-btn--ghost:hover { background: rgba(255,255,255,.08); transform: translateY(-2px); }


/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
	.xp-tab__body-inner { grid-template-columns: 1fr; gap: 28px; }
	.xp-tab__viz { display: none; }
	.xp-expand__media { width: 220px; height: 300px; }
	/* En móvil el zoom parallax se simplifica: las imágenes laterales
	   se ocultan para no saturar pantallas pequeñas. */
	.xp-zoom__item[data-i="4"], .xp-zoom__item[data-i="5"], .xp-zoom__item[data-i="6"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.xp-dot, .xp-expand__cue, .xp-tab__pulse { animation: none; }
	.xp-expand__content { opacity: 1 !important; }
	.xp-expand { height: auto; }
	.xp-expand__pin { position: relative; height: 100vh; }
	.xp-zoom__stage { height: auto; }
	.xp-zoom__sticky { position: relative; height: auto; }
	.xp-zoom__item { position: relative; }
}