/* Shift In · Experiencia «Un toque, un punto en el mapa». Se apoya en landing.css (componentes, formularios, panel) y redefine la dirección visual. */

.ex-body {
    --ex-ink: #0b0c10;
    --ex-ink-2: #15171d;
    --ex-stone: #f3f5f8;
    --ex-stone-2: #e7eaef;
    --ex-graphite: #0d0f14;
    --ex-graphite-2: #13161d;
    --ex-line: rgba(255, 255, 255, .08);
    --ex-dawn: #7e9bd8;
    --ex-dusk: #e9765f;
    --ex-muted: #626875;
    --sl-bg: var(--ex-stone);
    --sl-bg-2: var(--ex-stone-2);
    --sl-ink: var(--ex-ink);
    --sl-text: #3a3833;
    --sl-muted: var(--ex-muted);
    --sl-line: rgba(11, 12, 16, .12);
    --sl-blue: #33508f;
    --sl-cyan: var(--ex-dawn);
    --sl-night: var(--ex-ink);
    --sl-grad: linear-gradient(100deg, var(--ex-ink), #2a2c33);
    --sl-grad-brand: var(--ex-stone);
    background: var(--ex-graphite);
}

/* Cabecera clara sobre la escena de día */
.ex-body .sl-header:not(.is-scrolled) { color: var(--ex-stone); }
.ex-body .sl-header.is-light { background: rgba(243, 245, 248, .82); box-shadow: 0 1px 0 rgba(11, 12, 16, .08); }
.ex-body .sl-btn--primary { color: var(--ex-stone); background: var(--ex-ink); box-shadow: none; }
.ex-body .sl-btn--primary:hover { box-shadow: 0 14px 30px -14px rgba(11, 12, 16, .6); }

.ex-kicker {
    display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px;
    font-family: var(--sl-font-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: currentColor; opacity: .7;
}
.ex-kicker::before { content: ''; width: 28px; height: 1px; background: currentColor; }

/* ---------- Plano secuencia ---------- */

.ex-film { position: relative; height: 900vh; background: #14161c; }
.ex-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: var(--ex-stone); }
.ex-stills, .ex-video, .ex-fx, .ex-grain { position: absolute; inset: 0; width: 100%; height: 100%; }
.ex-still { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; opacity: 0; transition: opacity .8s; }
.ex-still.is-active { opacity: 1; }
.ex-body .ex-video { width: 100%; height: 100% !important; max-width: none; }
.ex-video { object-fit: cover; opacity: 0; transition: opacity .8s; filter: saturate(.9) contrast(1.06); }
.ex-film.is-video .ex-video { opacity: 1; }
.ex-film.is-video .ex-stills { opacity: 0; transition: opacity .8s; }
.ex-fx { z-index: 1; pointer-events: none; }
/* Grano de película y etalonado: sombras frías, viñeta */
.ex-grain {
    z-index: 1; pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(5, 7, 12, .55) 100%),
        linear-gradient(180deg, rgba(8, 10, 18, .35), transparent 25%, transparent 60%, rgba(8, 10, 18, .55));
}
.ex-grain::after {
    content: ''; position: absolute; inset: -50%; opacity: .1; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: sl-grain .9s steps(6) infinite;
}
.ex-film.is-panel .ex-grain { background: rgba(10, 12, 18, .82); transition: background .6s; }

/* Teléfono del primer capítulo */
.ex-hero-phone { position: absolute; z-index: 2; right: max(24px, calc((100% - 1200px) / 2 + 40px)); top: 50%; width: min(300px, 24vw); margin-top: calc(min(300px, 24vw) * -1.08); will-change: transform, opacity; }
.ex-hero-phone .sl-iphone__body { box-shadow: inset 0 0 0 .22cqw rgba(255, 255, 255, .28), 0 60px 120px -30px rgba(0, 0, 0, .8), 0 0 80px -10px rgba(255, 170, 120, .35); }
.ex-tap { position: absolute; z-index: 5; left: 50%; top: 53.5%; width: 30%; aspect-ratio: 1; margin-left: -15%; border-radius: 50%; transform: translateY(-50%) scale(.2); border: 2px solid rgba(61, 123, 255, .9); opacity: 0; pointer-events: none; }
.ex-tap.is-on { animation: ex-tap .7s var(--sl-ease) forwards; }
@keyframes ex-tap { 0% { opacity: 1; transform: translateY(-50%) scale(.2); } 100% { opacity: 0; transform: translateY(-50%) scale(2.4); } }

/* Captura real del panel al final del plano */
.ex-panelshot { position: absolute; z-index: 2; right: max(24px, calc((100% - 1200px) / 2)); top: 50%; width: min(680px, 52vw); transform: translateY(60px); opacity: 0; margin-top: calc(min(680px, 52vw) * -.33); pointer-events: none; }
.ex-body .ex-panelshot .sl-browser { display: block; transform: none; }
.ex-panelshot .sl-browser__view { aspect-ratio: 2000 / 1250; }

.ex-chapter {
    --o: 0; --y: 24px;
    position: absolute; z-index: 3; max-width: 560px; bottom: 14vh;
    opacity: var(--o); transform: translate3d(0, var(--y), 0); will-change: opacity, transform;
    pointer-events: none;
}
.ex-chapter.is-on { pointer-events: auto; }
.ex-chapter--left { left: max(24px, calc((100% - 1200px) / 2)); }
.ex-chapter--right { right: max(24px, calc((100% - 1200px) / 2)); text-align: right; }
.ex-chapter--right .ex-kicker { flex-direction: row-reverse; }
.ex-chapter--top { left: max(24px, calc((100% - 1200px) / 2)); bottom: auto; top: calc(var(--sl-header-h) + 96px); }
.ex-chapter--dark { color: var(--ex-ink); }

/* Velo local para la legibilidad, sin oscurecer la escena */
.ex-chapter::before {
    content: ''; position: absolute; z-index: -1; inset: -18% -24%;
    background: radial-gradient(closest-side, rgba(11, 12, 16, .5), rgba(11, 12, 16, 0));
    filter: blur(10px);
}
.ex-chapter--dark::before { background: radial-gradient(closest-side, rgba(244, 242, 245, .8), rgba(244, 242, 245, 0)); }

.ex-body .ex-title {
    color: inherit; font-size: clamp(42px, 6.4vw, 96px); font-weight: 560; line-height: .98; letter-spacing: -.055em;
}
.ex-body .ex-title em { font-style: normal; font-weight: 200; letter-spacing: -.06em; color: inherit; opacity: .78; }
.ex-text { margin-top: 22px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; letter-spacing: -.012em; max-width: 470px; }
.ex-chapter--right .ex-text { margin-left: auto; }

.ex-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }
.ex-chapter--right .ex-actions { justify-content: flex-end; }
.ex-btn {
    display: inline-flex; align-items: center; padding: 16px 26px; border-radius: 999px;
    background: var(--ex-stone); color: var(--ex-ink) !important; text-decoration: none; font-weight: 550; font-size: 16px; letter-spacing: -.01em;
    transition: transform .4s var(--sl-ease), box-shadow .4s var(--sl-ease);
}
.ex-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -16px rgba(11, 12, 16, .7); }
.ex-chapter--dark .ex-btn { background: var(--ex-ink); color: var(--ex-stone) !important; }
.ex-link { color: inherit !important; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* Etiquetas de fichaje sobre cada columna de luz y marcadores del mapa */
.ex-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ex-label {
    position: absolute; left: 0; top: 0; opacity: 0;
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; margin: -14px 0 0 -6px;
    padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(12, 14, 20, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
    font-family: var(--sl-font-mono); font-size: 11.5px; letter-spacing: .04em; color: rgba(255, 255, 255, .8);
}
.ex-label i { width: 8px; height: 8px; border-radius: 50%; background: #3d7bff; box-shadow: 0 0 10px #3d7bff; }
.ex-label.is-out i { background: #ff6a55; box-shadow: 0 0 10px #ff6a55; }
.ex-label b { font-family: var(--sl-font-body); font-weight: 600; font-size: 12.5px; letter-spacing: -.01em; color: #fff; }

/* HUD: hora simulada, personal operativo y fichajes del día (como el panel) */
.ex-hud { position: absolute; z-index: 3; left: max(24px, calc((100% - 1200px) / 2)); top: calc(var(--sl-header-h) + 26px); display: flex; gap: 28px; transition: color .6s; }
.ex-hud__item { display: grid; font-family: var(--sl-font-mono); font-variant-numeric: tabular-nums; }
.ex-hud__item span { font-size: 15px; font-weight: 500; letter-spacing: .03em; }
.ex-hud__item em { font-style: normal; }
.ex-hud__item small { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.ex-film.is-map .ex-hud { color: var(--ex-ink); }
.ex-hud__rail { position: absolute; z-index: 3; right: max(16px, calc((100% - 1260px) / 2)); top: 50%; width: 1px; height: 120px; margin-top: -60px; background: rgba(255, 255, 255, .2); }
.ex-hud__rail i { position: absolute; inset: 0; background: currentColor; transform-origin: top; transform: scaleY(0); }

.ex-scrollhint { position: absolute; z-index: 3; left: 50%; bottom: 28px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font-family: var(--sl-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ex-stone); opacity: .6; transition: opacity .6s; }
.ex-scrollhint i { width: 1px; height: 40px; background: linear-gradient(currentColor, transparent); animation: ex-hint 2.2s var(--sl-ease) infinite; transform-origin: top; }
.ex-film.is-scrolled .ex-scrollhint { opacity: 0; }

@keyframes ex-hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- Producto ---------- */

.ex-head { max-width: 760px; margin-bottom: 72px; }
.ex-head h2 { font-size: clamp(38px, 5vw, 72px); font-weight: 560; letter-spacing: -.055em; line-height: 1; }
.ex-head h2 em { font-weight: 200; color: inherit; opacity: .6; }
.ex-head > p:not(.ex-kicker) { margin-top: 20px; font-size: 19px; color: var(--ex-muted); }
.ex-head--light { color: var(--ex-stone); }
.ex-body .ex-head--light h2 { color: var(--ex-stone); }
.ex-head--light > p:not(.ex-kicker) { color: rgba(243, 245, 248, .58); }

.ex-product { padding: 160px 0 170px; background: var(--ex-graphite); border-top: 1px solid var(--ex-line); }
.ex-phones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; align-items: start; }
.ex-phone { margin: 0; transform: translateY(calc(var(--i) * 28px)); }
.ex-phone figcaption { margin-top: 26px; font-size: 15px; line-height: 1.45; color: rgba(243, 245, 248, .55); }
.ex-phone figcaption strong { display: block; color: var(--ex-stone); font-weight: 600; font-size: 17px; letter-spacing: -.02em; margin-bottom: 4px; }
.ex-body .sl-iphone__body { background: linear-gradient(140deg, #9aa0aa 0%, #3c4048 18%, #23262c 48%, #3f434b 78%, #a3a9b3 100%); }
.ex-body .sl-iphone__btn { background: linear-gradient(90deg, #23262c, #8e949e 60%, #343840); }

.ex-admin { padding: 150px 0; background: var(--ex-graphite-2); border-top: 1px solid var(--ex-line); }
.ex-body .ex-admin .sl-tab__num { color: var(--ex-dawn); }
.ex-body .ex-admin .sl-tab__progress i { background: var(--ex-stone); }
.ex-body .ex-admin .sl-browser { background: #1c1e24; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 80px 140px -50px rgba(0, 0, 0, .9); }

.ex-pricing { position: relative; padding: 150px 0; background: var(--ex-graphite); color: var(--ex-stone); border-top: 1px solid var(--ex-line); }
.ex-body .ex-pricing__copy h2 { color: var(--ex-stone); }
.ex-pricing__inner { display: grid; grid-template-columns: 1fr 460px; gap: 80px; align-items: center; }
.ex-pricing__copy h2 { font-size: clamp(40px, 5.4vw, 76px); font-weight: 560; letter-spacing: -.06em; line-height: 1; }
.ex-pricing__copy h2 em { font-weight: 200; color: inherit; opacity: .6; }
.ex-pricing__copy > p:not(.ex-kicker) { margin-top: 22px; font-size: 19px; color: rgba(243, 245, 248, .58); max-width: 460px; }
/* Tarjeta de suscripción: sin degradados, borde fino y luz neutra */
.ex-body .sl-price-card { background: #171a22; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 60px 120px -50px rgba(0, 0, 0, .9); }
.ex-body .sl-price-card::before { display: none; }
.ex-body .sl-price-card::after { display: none; }
.ex-body .sl-price-card .sl-btn--primary { background: var(--ex-stone); color: var(--ex-ink); }
.ex-body .sl-price-card .sl-btn { white-space: normal; text-align: center; line-height: 1.25; padding-inline: 22px; }
.ex-body .sl-price-card__list li::before { background: var(--ex-stone); }
.ex-body .sl-price-card__per { max-width: 9em; }

.ex-body .sl-faq { background: var(--ex-stone); color: #3b4150; }
.ex-body .sl-faq__item.is-open .sl-faq__plus { background: var(--ex-ink); }
.ex-body .sl-signup { background: var(--ex-stone-2); }
.ex-body .sl-signup__bg { display: none; }
.ex-body .sl-form .wpcf7-submit { background: var(--ex-ink); box-shadow: none; }
.ex-body .sl-form .form-control:focus { border-color: var(--ex-ink); box-shadow: 0 0 0 4px rgba(11, 12, 16, .1); }
.ex-body .sl-contact a, .ex-body .sl-faq .sl-head a, .ex-body .sl-form__legal a { color: var(--ex-ink); }
.ex-body .sl-sticky-cta { background: var(--ex-ink); box-shadow: 0 16px 40px -14px rgba(11, 12, 16, .7); }

/* ---------- Responsive: interpretación vertical ---------- */

@media (max-width: 1080px) {
    .ex-phones { grid-template-columns: repeat(2, 1fr); }
    .ex-phone { transform: none; }
    .ex-phone:nth-child(even) { transform: translateY(40px); }
    .ex-pricing__inner { grid-template-columns: minmax(0, 1fr); gap: 56px; }
    .ex-body .sl-price-card { max-width: 520px; width: 100%; }
}

@media (max-width: 760px) {
    .ex-film { height: 820vh; }
    .ex-chapter, .ex-chapter--left, .ex-chapter--right {
        left: 20px; right: 20px; bottom: calc(96px + env(safe-area-inset-bottom)); max-width: none; text-align: left;
    }
    .ex-chapter--right .ex-kicker { flex-direction: row; }
    .ex-chapter--right .ex-text { margin-left: 0; }
    .ex-chapter--right .ex-actions { justify-content: flex-start; }
    .ex-chapter::before { inset: -14% -10%; }
    .ex-body .ex-title { font-size: clamp(38px, 11vw, 52px); }
    .ex-text { margin-top: 14px; }
    .ex-btn { padding: 14px 22px; font-size: 15px; }
    .ex-hud__rail, .ex-scrollhint { display: none; }
    .ex-chapter--top { top: calc(var(--sl-header-h) + 64px); bottom: auto; }
    .ex-hero-phone { right: 50%; width: 46vw; margin-right: -23vw; top: calc(var(--sl-header-h) + 70px); margin-top: 0; }
    .ex-film .ex-chapter:first-of-type { bottom: calc(40px + env(safe-area-inset-bottom)); }
    .ex-panelshot { right: 16px; left: 16px; width: auto; top: calc(var(--sl-header-h) + 70px); margin-top: 0; }
    .ex-hud { top: calc(var(--sl-header-h) + 14px); left: 20px; gap: 18px; }
    .ex-label { font-size: 10px; padding: 4px 9px 4px 6px; }
    .ex-label b { font-size: 11px; }
    .ex-product, .ex-admin, .ex-pricing { padding: 104px 0; }
    .ex-head { margin-bottom: 48px; }
    .ex-phones { grid-template-columns: 1fr 1fr; gap: 18px; }
    .ex-phone figcaption { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .ex-film { height: auto; }
    .ex-stage { position: relative; height: auto; overflow: visible; }
    .ex-stills { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; }
    .ex-chapter { position: relative; --o: 1 !important; --y: 0 !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; margin: 0 auto !important; padding: 30vh 24px; max-width: 760px; width: auto; text-align: left; }
    .ex-hud, .ex-hud__rail, .ex-labels, .ex-scrollhint { display: none; }
    .ex-phone { transform: none; }
}