/* ═══════════════════════════════════════════════════════════════════════
   BACKSTAGE360 · Sistema visual cinemático morado
   Paleta: Purple Deep + Magenta + Platinum
   Tipografía: Space Grotesk (display) + Outfit (editorial) + Inter (body)
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}
img, svg { max-width: 100%; display: block; }

:root {
    /* Paleta morada */
    --bs-purple-deep:  #1A0833;
    --bs-purple-bg:    #2A0F4D;
    --bs-purple:       #6B21A8;
    --bs-purple-mid:   #8B3FCC;
    --bs-purple-light: #A855F7;
    --bs-magenta:      #D946EF;
    --bs-magenta-soft: rgba(217,70,239,0.18);
    --bs-platinum:     #F1F5F9;
    --bs-pearl:        #E5E7EB;
    --bs-silver:       #94A3B8;
    --bs-charcoal:     #0F172A;
    --bs-spotlight:    rgba(217,70,239,0.25);
    --bs-glass:        rgba(255,255,255,0.05);
    --bs-glass-strong: rgba(255,255,255,0.08);
    --bs-border:       rgba(168,85,247,0.25);

    /* Tipografías */
    --bs-display:   'Space Grotesk', 'Inter', system-ui, sans-serif;
    --bs-editorial: 'Outfit', 'Inter', system-ui, sans-serif;
    --bs-body:      'Inter', system-ui, sans-serif;

    /* Easings */
    --bs-ease:    cubic-bezier(0.16, 1, 0.3, 1);
    --bs-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── BODY · fondo cinematográfico morado ───────────────────────── */
body {
    font-family: var(--bs-body);
    color: var(--bs-platinum);
    background: var(--bs-purple-deep);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    position: relative;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(107,33,168,0.4) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(217,70,239,0.18) 0%, transparent 55%),
        linear-gradient(180deg, var(--bs-purple-deep) 0%, var(--bs-charcoal) 100%);
    pointer-events: none;
    z-index: 0;
}

/* ─── MASTHEAD ──────────────────────────────────────────────────── */
.masthead {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(26,8,51,0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--bs-border);
}
.masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.5rem;
    max-width: 1920px;
    margin: 0 auto;
}
.masthead__left { display: flex; align-items: center; gap: 1rem; }
.masthead__logo {
    font-family: var(--bs-display);
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    color: var(--bs-platinum);
    font-weight: 700;
    line-height: 1;
}
.masthead__logo .logo-360 {
    background: linear-gradient(135deg, var(--bs-purple-light) 0%, var(--bs-magenta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}
.masthead__divider { width: 1px; height: 18px; background: var(--bs-border); }
.masthead__tagline {
    font-family: var(--bs-body);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--bs-silver);
    text-transform: uppercase;
}
.masthead__right { display: flex; align-items: center; gap: 0.75rem; }
.masthead__counter {
    font-family: var(--bs-body);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: var(--bs-platinum);
    font-weight: 600;
}
.masthead__counter-sep { color: var(--bs-magenta); margin: 0 4px; }
.masthead__btn {
    background: transparent;
    border: 1px solid var(--bs-border);
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--bs-platinum);
    font-size: 0.8rem;
    border-radius: 6px;
    transition: all 0.3s var(--bs-smooth);
}
.masthead__btn:hover {
    background: var(--bs-purple);
    color: var(--bs-platinum);
    border-color: var(--bs-purple);
}
.masthead__progress {
    height: 2px;
    background: rgba(168,85,247,0.1);
    overflow: hidden;
}
.masthead__progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--bs-purple-light), var(--bs-magenta));
    transition: width 0.6s var(--bs-ease);
    box-shadow: 0 0 12px var(--bs-magenta);
}

/* ─── SLIDES CONTAINER ──────────────────────────────────────────── */
.slides {
    position: fixed;
    inset: 0;
    z-index: 5;
    overflow: hidden;
}
.slide {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.985);
    transition:
        opacity 0.55s var(--bs-smooth),
        transform 0.75s var(--bs-ease),
        visibility 0s linear 0.55s;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}
.slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition:
        opacity 0.65s var(--bs-smooth),
        transform 0.85s var(--bs-ease),
        visibility 0s linear;
}

/* Wrapper interno universal */
.slide > .bs-cover,
.slide > .bs-hook,
.slide > .bs-truth,
.slide > .bs-promise,
.slide > .bs-manifest,
.slide > .bs-before,
.slide > .bs-after,
.slide > .bs-pillars,
.slide > .bs-pillar-deep,
.slide > .bs-orchestra,
.slide > .bs-month-one,
.slide > .bs-bridge,
.slide > .bs-role-card,
.slide > .bs-role-matrix,
.slide > .bs-stories,
.slide > .bs-ritual,
.slide > .bs-tangibles,
.slide > .bs-imagine,
.slide > .bs-cta {
    flex: 1 1 auto;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: clamp(80px, 10vh, 110px) clamp(1.5rem, 5vw, 5rem) clamp(4.5rem, 8vh, 5.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}

/* Numerito */
.slide::after {
    content: attr(data-slide) " / 27";
    position: fixed;
    bottom: clamp(0.6rem, 1.5vh, 1.2rem);
    right: clamp(0.8rem, 2vw, 1.5rem);
    font-family: var(--bs-body);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    color: var(--bs-silver);
    opacity: 0.55;
    pointer-events: none;
    z-index: 40;
    text-transform: uppercase;
    font-weight: 500;
}

/* ─── BACKGROUNDS ─────────────────────────────────────────────── */
.bs-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.bs-bg__photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--bs-purple-deep);
    opacity: 0.18;
    filter: grayscale(40%) contrast(1.1) brightness(0.5);
    mix-blend-mode: luminosity;
}
.bs-bg__spotlight {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(168,85,247,0.35) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(217,70,239,0.25) 0%, transparent 50%);
}
.bs-bg__beam {
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.4;
    pointer-events: none;
}
.bs-bg__beam--1 { background: var(--bs-purple-light); top: -200px; left: -100px; }
.bs-bg__beam--2 { background: var(--bs-magenta); bottom: -200px; right: -100px; }
.bs-bg__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(168,85,247,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168,85,247,0.04) 1px, transparent 1px);
    background-size: 80px 80px;
}

/* ─── KICKER · marca distintiva ──────────────────────────────── */
.bs-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--bs-body);
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    color: var(--bs-purple-light);
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.5rem 1rem;
    background: var(--bs-glass);
    border: 1px solid var(--bs-border);
    border-radius: 100px;
    margin-bottom: 1.5rem;
}
.bs-kicker--center { margin-left: auto; margin-right: auto; display: inline-flex; align-self: center; }
.bs-kicker__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--bs-magenta);
    box-shadow: 0 0 8px var(--bs-magenta);
    animation: bs-pulse 2s infinite;
}
@keyframes bs-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.4); }
}

/* ─── COVER (slide 1) ────────────────────────────────────────── */
.slide--cover { background: linear-gradient(135deg, var(--bs-purple-deep) 0%, var(--bs-charcoal) 100%); }
.bs-cover {
    text-align: center;
    align-items: center;
    gap: clamp(1rem, 3vh, 2rem);
}
.bs-cover__brand-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.bs-cover__brand-line { height: 1px; width: 60px; background: var(--bs-magenta); opacity: 0.6; }
.bs-cover__brand-text {
    font-family: var(--bs-body);
    font-size: 0.7rem;
    letter-spacing: 0.35em;
    color: var(--bs-purple-light);
    text-transform: uppercase;
    font-weight: 500;
}
.bs-cover__title {
    font-family: var(--bs-display);
    font-size: clamp(5rem, 16vw, 16rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
    font-weight: 700;
    color: var(--bs-platinum);
    margin: 0;
    text-shadow: 0 0 60px rgba(168,85,247,0.4);
}
.bs-cover__title-360 {
    background: linear-gradient(135deg, var(--bs-purple-light) 0%, var(--bs-magenta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}
.bs-cover__sub {
    font-family: var(--bs-editorial);
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    line-height: 1.4;
    color: var(--bs-pearl);
    max-width: 900px;
    font-weight: 400;
    margin-top: 0.5rem;
}
.bs-cover__sub em {
    font-style: italic;
    background: linear-gradient(135deg, var(--bs-purple-light), var(--bs-magenta));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}
.bs-cover__pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
.bs-cover__pill {
    font-family: var(--bs-body);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    color: var(--bs-platinum);
    text-transform: uppercase;
    background: var(--bs-glass);
    border: 1px solid var(--bs-border);
    padding: 0.5rem 1rem;
    border-radius: 100px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-weight: 500;
}
.bs-cover__pill-dot { color: var(--bs-magenta); font-size: 1.2rem; }
.bs-cover__hint {
    font-family: var(--bs-body);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    color: var(--bs-silver);
    text-transform: uppercase;
    margin-top: 1.5rem;
    opacity: 0.6;
}
.bs-cover__hint kbd {
    background: var(--bs-glass);
    border: 1px solid var(--bs-border);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--bs-platinum);
    font-family: var(--bs-body);
    font-size: 0.7em;
    margin: 0 2px;
}

/* ─── HOOK / TRUTH / PROMISE / MANIFEST · tipografía masiva ─── */
.bs-hook, .bs-truth, .bs-promise, .bs-manifest, .bs-imagine, .bs-cta {
    text-align: center;
    align-items: center;
    gap: clamp(1rem, 3vh, 2.5rem);
}

.bs-headline {
    font-family: var(--bs-display);
    font-size: clamp(2.4rem, 6vw, 5.5rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--bs-platinum);
    font-weight: 700;
    max-width: 1200px;
}
.bs-headline em {
    background: linear-gradient(135deg, var(--bs-purple-light) 0%, var(--bs-magenta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
    font-weight: 700;
}
.bs-headline--mega {
    font-size: clamp(3rem, 9vw, 9rem);
    line-height: 0.95;
}
.bs-lead {
    font-family: var(--bs-editorial);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    line-height: 1.55;
    color: var(--bs-pearl);
    max-width: 950px;
    font-weight: 400;
}
.bs-lead em {
    color: var(--bs-purple-light);
    font-style: italic;
    font-weight: 500;
}
.bs-lead strong { color: var(--bs-platinum); font-weight: 600; }

.bs-quote-mark {
    font-family: var(--bs-display);
    font-size: clamp(8rem, 16vw, 16rem);
    line-height: 0.5;
    color: var(--bs-magenta);
    opacity: 0.25;
    margin-bottom: 1rem;
}

.bs-signature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}
.bs-signature__line { height: 1px; width: 80px; background: var(--bs-purple-light); opacity: 0.5; }
.bs-signature__text {
    font-family: var(--bs-body);
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    color: var(--bs-purple-light);
    text-transform: uppercase;
    font-weight: 500;
}

/* ─── BEFORE / AFTER · contraste visual ─────────────────────── */
.bs-before, .bs-after {
    align-items: center;
    text-align: center;
}
.bs-ba-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    width: 100%;
    margin-top: 1.5rem;
}
.bs-ba-card {
    background: var(--bs-glass);
    border: 1px solid var(--bs-border);
    border-radius: 16px;
    padding: 1.8rem 1.5rem;
    text-align: left;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.bs-ba-card--bad {
    border-color: rgba(148,163,184,0.2);
    background: rgba(148,163,184,0.05);
}
.bs-ba-card--good {
    border-color: var(--bs-purple-light);
    background: linear-gradient(135deg, rgba(107,33,168,0.25) 0%, rgba(217,70,239,0.15) 100%);
    box-shadow: 0 16px 48px rgba(168,85,247,0.2);
}
.bs-ba-card__lbl {
    display: block;
    font-family: var(--bs-body);
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--bs-silver);
    margin-bottom: 0.6rem;
    font-weight: 600;
}
.bs-ba-card--good .bs-ba-card__lbl { color: var(--bs-purple-light); }
.bs-ba-card__title {
    font-family: var(--bs-display);
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    line-height: 1.15;
    color: var(--bs-platinum);
    font-weight: 700;
    margin-bottom: 0.8rem;
    letter-spacing: -0.01em;
}
.bs-ba-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.bs-ba-list li {
    font-family: var(--bs-body);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--bs-pearl);
    padding-left: 1.4rem;
    position: relative;
}
.bs-ba-card--bad .bs-ba-list li::before {
    content: '✕';
    position: absolute;
    left: 0;
    color: var(--bs-silver);
    font-weight: 700;
}
.bs-ba-card--good .bs-ba-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--bs-magenta);
    font-weight: 700;
}
.bs-ba-list li strong { color: var(--bs-platinum); font-weight: 600; }

/* ─── PILLARS · 5 pilares ─────────────────────────────────── */
.bs-pillars { align-items: stretch; gap: 1.2rem; }
.bs-pillars__header { text-align: center; align-self: center; max-width: 1000px; }
.bs-pillars__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.8rem;
    width: 100%;
    margin-top: 2rem;
}
.bs-pillar {
    background: var(--bs-glass);
    border: 1px solid var(--bs-border);
    border-radius: 16px;
    padding: 1.4rem 1rem;
    text-align: center;
    transition: all 0.4s var(--bs-ease);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
}
.bs-pillar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--bs-purple-light), var(--bs-magenta));
    opacity: 0;
    transition: opacity 0.4s;
}
.bs-pillar:hover {
    transform: translateY(-6px);
    border-color: var(--bs-magenta);
    background: var(--bs-glass-strong);
    box-shadow: 0 24px 60px rgba(168,85,247,0.3);
}
.bs-pillar:hover::before { opacity: 1; }
.bs-pillar__icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--bs-purple) 0%, var(--bs-magenta) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--bs-platinum);
    margin: 0 auto 0.8rem;
    box-shadow: 0 8px 24px rgba(168,85,247,0.4);
}
.bs-pillar__num {
    font-family: var(--bs-body);
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    color: var(--bs-purple-light);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.bs-pillar__name {
    font-family: var(--bs-display);
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    color: var(--bs-platinum);
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}
.bs-pillar__tag {
    font-family: var(--bs-body);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--bs-pearl);
}

/* ─── PILLAR DEEP · slide individual de cada pilar ──────── */
/* En pilar deep el contenido es alto: alineamos al inicio para que el título
   siempre quede visible y el resto se pueda scrollear si hace falta. */
.slide--pillar-deep > .bs-pillar-deep {
    justify-content: flex-start;
    padding-top: clamp(70px, 9vh, 95px);
    gap: 0.75rem;
}
.slide--pillar-deep .bs-headline {
    font-size: clamp(1.5rem, 2.8vw, 2.4rem);
    line-height: 1.1;
}
.bs-pillar-deep__layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    align-items: center;
    margin-top: 0.5rem;
}
.bs-pillar-deep__hero {
    background: linear-gradient(135deg, rgba(107,33,168,0.4) 0%, rgba(217,70,239,0.25) 100%);
    border: 1px solid var(--bs-purple-light);
    border-radius: 18px;
    padding: 1.4rem 1.3rem;
    text-align: center;
    backdrop-filter: blur(12px);
    box-shadow: 0 16px 48px rgba(168,85,247,0.22);
}
.bs-pillar-deep__hero-icon {
    width: 64px; height: 64px;
    margin: 0 auto 0.7rem;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--bs-purple-light) 0%, var(--bs-magenta) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    color: var(--bs-platinum);
    box-shadow: 0 10px 24px rgba(217,70,239,0.4);
}
.bs-pillar-deep__hero-num {
    font-family: var(--bs-body);
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    color: var(--bs-purple-light);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.bs-pillar-deep__hero-title {
    font-family: var(--bs-display);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    color: var(--bs-platinum);
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1;
}
.bs-pillar-deep__hero-tag {
    font-family: var(--bs-editorial);
    font-style: italic;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--bs-pearl);
}
.bs-pillar-deep__body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.bs-pillar-deep__story {
    font-family: var(--bs-editorial);
    font-style: italic;
    font-size: clamp(0.92rem, 1.25vw, 1.08rem);
    line-height: 1.5;
    color: var(--bs-platinum);
    padding: 0.7rem 1.1rem;
    border-left: 3px solid var(--bs-magenta);
    background: var(--bs-glass);
    border-radius: 0 8px 8px 0;
}
.bs-pillar-deep__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
}
.bs-feat {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    background: var(--bs-glass);
    border: 1px solid var(--bs-border);
    border-radius: 9px;
    transition: all 0.3s var(--bs-ease);
}
.bs-feat:hover {
    border-color: var(--bs-magenta);
    background: var(--bs-glass-strong);
}
.bs-feat__icon {
    color: var(--bs-magenta);
    font-size: 0.92rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.bs-feat__text {
    font-family: var(--bs-body);
    font-size: 0.78rem;
    line-height: 1.42;
    color: var(--bs-pearl);
}
.bs-feat__text strong { color: var(--bs-platinum); font-weight: 600; }

/* ─── ORCHESTRA · diagrama radial ───────────────────────── */
.slide--orchestra > .bs-orchestra {
    justify-content: flex-start;
    padding-top: clamp(70px, 9vh, 95px);
    gap: 0.6rem;
}
.slide--orchestra .bs-headline {
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    line-height: 1.05;
}
.slide--orchestra .bs-lead {
    font-size: clamp(0.9rem, 1.3vw, 1.1rem);
    margin-bottom: 0.3rem;
}
.bs-orchestra { align-items: center; text-align: center; }
.bs-orchestra__viz {
    position: relative;
    width: min(100%, 60vh);
    max-width: 480px;
    aspect-ratio: 1;
    margin: 0.8rem auto 0;
}
.bs-orch-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 36%; height: 36%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-purple) 0%, var(--bs-magenta) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--bs-platinum);
    box-shadow: 0 24px 64px rgba(217,70,239,0.5);
    text-align: center;
    padding: 0.6rem;
    z-index: 1;
}
.bs-orch-center__brand {
    font-family: var(--bs-display);
    font-size: clamp(0.85rem, 1.7vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
}
.bs-orch-center__brand-360 {
    display: block;
    font-size: 1.4em;
    background: linear-gradient(135deg, #fff 0%, #FBCFE8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 0.15em;
    line-height: 1;
}
.bs-orch-center__tag {
    font-family: var(--bs-body);
    font-size: clamp(0.5rem, 0.85vw, 0.65rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 0.45rem;
    opacity: 0.85;
}
.bs-orch-node {
    position: absolute;
    width: 24%; height: 24%;
    border-radius: 50%;
    background: var(--bs-glass-strong);
    border: 2px solid var(--bs-purple-light);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.4rem;
    transition: all 0.3s var(--bs-ease);
    box-shadow: 0 8px 24px rgba(168,85,247,0.25);
}
.bs-orch-node:hover {
    border-color: var(--bs-magenta);
    transform: translate(var(--tx, 0), var(--ty, 0)) scale(1.06);
    box-shadow: 0 16px 40px rgba(217,70,239,0.4);
    z-index: 2;
}
/* Pentagon · 5 nodos en posiciones de reloj 12, 2.4, 4.8, 7.2, 9.6 */
.bs-orch-node--escuchar { top:  -2%; left: 38%; }   /* 12h */
.bs-orch-node--conocer  { top:  28%; left: 76%; }   /* 2.4h */
.bs-orch-node--producir { top:  73%; left: 63%; }   /* 4.8h */
.bs-orch-node--conectar { top:  73%; left: 13%; }   /* 7.2h */
.bs-orch-node--cuidar   { top:  28%; left:  0%; }   /* 9.6h */
.bs-orch-node__icon {
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    color: var(--bs-magenta);
    margin-bottom: 0.2rem;
}
.bs-orch-node__name {
    font-family: var(--bs-display);
    font-size: clamp(0.65rem, 1vw, 0.85rem);
    font-weight: 700;
    color: var(--bs-platinum);
    letter-spacing: 0.04em;
}
.bs-orch-svg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.bs-orch-line {
    stroke: var(--bs-purple-light);
    stroke-width: 1.5;
    fill: none;
    opacity: 0.3;
    stroke-dasharray: 4 6;
}

/* ─── MONTH ONE · 4 semanas ──────────────────────────────── */
.bs-month-one { align-items: stretch; }
.bs-month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
    width: 100%;
}
.bs-week {
    background: var(--bs-glass);
    border: 1px solid var(--bs-border);
    border-radius: 14px;
    padding: 1.4rem 1.1rem;
    backdrop-filter: blur(12px);
    transition: all 0.4s var(--bs-ease);
    position: relative;
}
.bs-week::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bs-purple-light), var(--bs-magenta));
    border-radius: 14px 14px 0 0;
}
.bs-week:hover {
    transform: translateY(-4px);
    border-color: var(--bs-magenta);
    box-shadow: 0 16px 40px rgba(217,70,239,0.25);
}
.bs-week--final {
    background: linear-gradient(135deg, rgba(107,33,168,0.4) 0%, rgba(217,70,239,0.25) 100%);
    border-color: var(--bs-magenta);
}
.bs-week__num {
    font-family: var(--bs-display);
    font-size: 2.4rem;
    line-height: 1;
    background: linear-gradient(135deg, var(--bs-purple-light), var(--bs-magenta));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    margin-bottom: 0.3rem;
}
.bs-week__lbl {
    font-family: var(--bs-body);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    color: var(--bs-purple-light);
    text-transform: uppercase;
    margin-bottom: 0.8rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--bs-border);
    font-weight: 600;
}
.bs-week__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.bs-week__list li {
    font-family: var(--bs-body);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--bs-pearl);
    padding-left: 1.2rem;
    position: relative;
}
.bs-week__list li::before {
    content: '◆';
    position: absolute;
    left: 0;
    color: var(--bs-magenta);
    font-size: 0.6rem;
    top: 6px;
}
.bs-week__list li strong { color: var(--bs-platinum); font-weight: 600; }

/* ─── BRIDGE · slide-puente entre actos ──────────────────── */
.bs-bridge {
    text-align: center;
    align-items: center;
    background: linear-gradient(135deg, var(--bs-purple-deep) 0%, var(--bs-charcoal) 100%);
}

/* ─── ROLE CARDS · adaptación por cargo ──────────────────── */
.slide--role > .bs-role-card,
.slide--role-matrix > .bs-role-matrix,
.slide--month-one > .bs-month-one,
.slide--stories > .bs-stories,
.slide--tangibles > .bs-tangibles,
.slide--ritual > .bs-ritual,
.slide--before-after > .bs-before,
.slide--pillars > .bs-pillars {
    justify-content: flex-start;
    padding-top: clamp(70px, 9vh, 95px);
}
.bs-role-card { align-items: stretch; }
.bs-role-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
    margin-top: 1.5rem;
    align-items: center;
}
.bs-role-hero {
    background: linear-gradient(135deg, rgba(107,33,168,0.5) 0%, rgba(217,70,239,0.3) 100%);
    border: 1px solid var(--bs-magenta);
    border-radius: 20px;
    padding: 2rem 1.4rem;
    text-align: center;
    backdrop-filter: blur(12px);
    box-shadow: 0 24px 60px rgba(217,70,239,0.3);
}
.bs-role-hero__icon {
    width: 72px; height: 72px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--bs-glass-strong);
    border: 2px solid var(--bs-purple-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--bs-platinum);
}
.bs-role-hero__name {
    font-family: var(--bs-display);
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    color: var(--bs-platinum);
    font-weight: 700;
    margin-bottom: 0.4rem;
    letter-spacing: -0.02em;
}
.bs-role-hero__sub {
    font-family: var(--bs-body);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--bs-purple-light);
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-weight: 600;
}
.bs-role-hero__quote {
    font-family: var(--bs-editorial);
    font-style: italic;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--bs-pearl);
}
.bs-role-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.bs-role-section {
    background: var(--bs-glass);
    border: 1px solid var(--bs-border);
    border-radius: 12px;
    padding: 1rem 1.2rem;
}
.bs-role-section__title {
    font-family: var(--bs-body);
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    color: var(--bs-purple-light);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.bs-role-section__body {
    font-family: var(--bs-body);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--bs-pearl);
}
.bs-role-section__body strong { color: var(--bs-platinum); font-weight: 600; }
.bs-role-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}
.bs-role-tag {
    font-family: var(--bs-body);
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    color: var(--bs-purple-light);
    background: rgba(168,85,247,0.12);
    border: 1px solid var(--bs-border);
    padding: 0.25rem 0.6rem;
    border-radius: 100px;
    font-weight: 500;
}

/* ─── ROLE MATRIX · matriz módulos × cargos ─────────────── */
.bs-role-matrix { align-items: stretch; }
.bs-matrix {
    background: var(--bs-glass);
    border: 1px solid var(--bs-border);
    border-radius: 16px;
    overflow: hidden;
    margin-top: 1.5rem;
    backdrop-filter: blur(12px);
}
.bs-matrix-row {
    display: grid;
    grid-template-columns: 1.6fr repeat(5, 1fr);
    gap: 0;
    border-bottom: 1px solid var(--bs-border);
}
.bs-matrix-row:last-child { border-bottom: none; }
.bs-matrix-row > div {
    padding: 0.8rem 1rem;
    border-right: 1px solid var(--bs-border);
    font-family: var(--bs-body);
    font-size: 0.8rem;
    color: var(--bs-pearl);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bs-matrix-row > div:last-child { border-right: none; }
.bs-matrix-row > div:first-child {
    justify-content: flex-start;
    color: var(--bs-platinum);
    font-weight: 600;
    font-family: var(--bs-display);
    font-size: 0.92rem;
    background: rgba(168,85,247,0.08);
}
.bs-matrix-row--head {
    background: linear-gradient(90deg, var(--bs-purple) 0%, var(--bs-purple-mid) 100%);
}
.bs-matrix-row--head > div {
    font-family: var(--bs-body);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bs-platinum);
    font-weight: 700;
}
.bs-matrix-row--head > div:first-child {
    background: transparent;
    color: var(--bs-platinum);
    justify-content: flex-start;
    font-family: var(--bs-body);
    font-size: 0.62rem;
}
.bs-matrix-cell--max {
    background: rgba(217,70,239,0.25);
    color: var(--bs-magenta) !important;
    font-weight: 700;
    font-size: 1rem !important;
}
.bs-matrix-cell--high { color: var(--bs-purple-light) !important; font-weight: 600; }
.bs-matrix-cell--med { color: var(--bs-pearl) !important; opacity: 0.7; }
.bs-matrix-cell--low { color: var(--bs-silver) !important; opacity: 0.5; }

/* ─── STORIES · 3 micro-historias ────────────────────────── */
.bs-stories { align-items: stretch; }
.bs-stories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}
.bs-story-card {
    background: var(--bs-glass);
    border: 1px solid var(--bs-border);
    border-radius: 16px;
    padding: 1.5rem 1.3rem;
    backdrop-filter: blur(12px);
    transition: all 0.4s var(--bs-ease);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.bs-story-card:hover {
    transform: translateY(-4px);
    border-color: var(--bs-magenta);
    box-shadow: 0 24px 60px rgba(217,70,239,0.25);
}
.bs-story-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-purple) 0%, var(--bs-magenta) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bs-display);
    font-size: 1rem;
    color: var(--bs-platinum);
    font-weight: 700;
}
.bs-story-name {
    font-family: var(--bs-display);
    font-size: 1.1rem;
    color: var(--bs-platinum);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.bs-story-role {
    font-family: var(--bs-body);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    color: var(--bs-purple-light);
    text-transform: uppercase;
    margin-bottom: 0.3rem;
    font-weight: 600;
}
.bs-story-text {
    font-family: var(--bs-editorial);
    font-style: italic;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--bs-pearl);
}
.bs-story-text em { color: var(--bs-magenta); font-style: italic; }
.bs-story-result {
    font-family: var(--bs-body);
    font-size: 0.78rem;
    color: var(--bs-platinum);
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--bs-border);
    font-weight: 500;
}
.bs-story-result strong {
    background: linear-gradient(135deg, var(--bs-purple-light), var(--bs-magenta));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

/* ─── RITUAL · 4 pasos ───────────────────────────────────── */
.bs-ritual { align-items: stretch; }
.bs-ritual-line {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 2rem;
    position: relative;
}
.bs-ritual-line::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--bs-purple-light) 5%, var(--bs-magenta) 95%, transparent);
    z-index: 0;
}
.bs-ritual-step {
    text-align: center;
    padding: 0 0.5rem;
    position: relative;
    z-index: 1;
}
.bs-ritual-step__num {
    width: 64px; height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-purple) 0%, var(--bs-magenta) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bs-display);
    font-size: 1.4rem;
    color: var(--bs-platinum);
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(217,70,239,0.4);
}
.bs-ritual-step__title {
    font-family: var(--bs-display);
    font-size: 1.05rem;
    color: var(--bs-platinum);
    font-weight: 700;
    margin-bottom: 0.4rem;
    letter-spacing: -0.01em;
}
.bs-ritual-step__desc {
    font-family: var(--bs-body);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--bs-pearl);
}

/* ─── TANGIBLES · entregables ────────────────────────────── */
.bs-tangibles { align-items: stretch; }
.bs-tangibles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
    margin-top: 1.5rem;
}
.bs-tangible {
    background: var(--bs-glass);
    border: 1px solid var(--bs-border);
    border-radius: 12px;
    padding: 1.1rem 1rem;
    text-align: center;
    transition: all 0.3s var(--bs-ease);
    backdrop-filter: blur(12px);
}
.bs-tangible:hover {
    border-color: var(--bs-magenta);
    transform: translateY(-3px);
    background: var(--bs-glass-strong);
}
.bs-tangible__icon {
    font-size: 1.6rem;
    color: var(--bs-magenta);
    margin-bottom: 0.5rem;
}
.bs-tangible__name {
    font-family: var(--bs-display);
    font-size: 0.92rem;
    color: var(--bs-platinum);
    font-weight: 700;
    margin-bottom: 0.4rem;
    letter-spacing: -0.01em;
}
.bs-tangible__desc {
    font-family: var(--bs-body);
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--bs-pearl);
}

/* ─── IMAGINE · slide cinematográfica final ─────────────── */
.bs-imagine {
    background: linear-gradient(135deg, var(--bs-purple-deep) 0%, var(--bs-charcoal) 100%);
}
.bs-imagine__main {
    font-family: var(--bs-display);
    font-size: clamp(2rem, 4.5vw, 4.5rem);
    line-height: 1.05;
    color: var(--bs-platinum);
    font-weight: 700;
    max-width: 1300px;
    letter-spacing: -0.025em;
}
.bs-imagine__main em {
    background: linear-gradient(135deg, var(--bs-purple-light) 0%, var(--bs-magenta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
    font-weight: 700;
}

/* ─── CTA final ───────────────────────────────────────── */
.bs-cta__brand {
    font-family: var(--bs-display);
    font-size: clamp(4rem, 12vw, 12rem);
    line-height: 0.9;
    color: var(--bs-platinum);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-shadow: 0 0 60px rgba(168,85,247,0.4);
}
.bs-cta__brand-360 {
    background: linear-gradient(135deg, var(--bs-purple-light) 0%, var(--bs-magenta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bs-cta__action {
    display: inline-block;
    margin-top: 2rem;
    padding: 1rem 3rem;
    font-family: var(--bs-display);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    color: var(--bs-platinum);
    background: linear-gradient(135deg, var(--bs-purple) 0%, var(--bs-magenta) 100%);
    border-radius: 100px;
    border: none;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: 0 16px 40px rgba(217,70,239,0.4);
    text-decoration: none;
}
.bs-cta__contacts {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}
.bs-cta__contact {
    font-family: var(--bs-body);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: var(--bs-pearl);
}
.bs-cta__contact strong { color: var(--bs-magenta); font-weight: 600; }

/* ─── NAV ───────────────────────────────────────────────── */
.nav-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    background: rgba(26,8,51,0.7);
    color: var(--bs-platinum);
    border: 1px solid var(--bs-border);
    cursor: pointer;
    z-index: 50;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    border-radius: 50%;
    backdrop-filter: blur(12px);
    transition: all 0.3s var(--bs-smooth);
}
.nav-btn:hover {
    background: linear-gradient(135deg, var(--bs-purple) 0%, var(--bs-magenta) 100%);
    transform: translateY(-50%) scale(1.08);
    border-color: var(--bs-magenta);
}
.nav-btn--prev { left: 1rem; }
.nav-btn--next { right: 1rem; }
.nav-btn:disabled { opacity: 0.25; cursor: default; }

.dots {
    position: fixed;
    bottom: clamp(1rem, 3vh, 2rem); left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    gap: 5px;
    background: rgba(26,8,51,0.8);
    backdrop-filter: blur(12px);
    padding: 7px 11px;
    border-radius: 30px;
    border: 1px solid var(--bs-border);
    max-width: min(90vw, 700px);
    overflow-x: auto;
    scrollbar-width: none;
}
.dots::-webkit-scrollbar { display: none; }
.dot {
    width: 8px; height: 8px;
    background: rgba(168,85,247,0.35);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s var(--bs-smooth);
    flex-shrink: 0;
}
.dot:hover { background: var(--bs-purple-light); transform: scale(1.3); }
.dot.is-active {
    background: linear-gradient(90deg, var(--bs-purple-light), var(--bs-magenta));
    width: 22px;
    border-radius: 4px;
}

.slide-footer {
    position: fixed;
    bottom: 0.5rem;
    left: 1.5rem;
    z-index: 50;
    font-family: var(--bs-body);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--bs-silver);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.6;
    font-weight: 500;
}
.slide-footer__sep { color: var(--bs-magenta); }
.slide-footer kbd {
    font-family: var(--bs-body);
    background: var(--bs-glass);
    color: var(--bs-platinum);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.55rem;
    border: 1px solid var(--bs-border);
}

/* ─── OVERVIEW ──────────────────────────────────────────── */
.overview-modal {
    position: fixed;
    inset: 0;
    background: rgba(26,8,51,0.97);
    z-index: 200;
    display: none;
    flex-direction: column;
    padding: 1.5rem 2rem;
    overflow-y: auto;
    backdrop-filter: blur(20px);
}
.overview-modal.is-open { display: flex; }
.overview-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border);
    margin-bottom: 1.5rem;
}
.overview-modal__close {
    background: transparent;
    color: var(--bs-platinum);
    border: 1px solid var(--bs-border);
    width: 36px; height: 36px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s;
}
.overview-modal__close:hover {
    background: linear-gradient(135deg, var(--bs-purple), var(--bs-magenta));
    border-color: var(--bs-magenta);
}
.overview-modal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}
.overview-thumb {
    background: var(--bs-glass);
    color: var(--bs-platinum);
    padding: 1rem;
    border: 1px solid var(--bs-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s var(--bs-ease);
    text-align: left;
    aspect-ratio: 16 / 10;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backdrop-filter: blur(8px);
}
.overview-thumb:hover {
    transform: translateY(-3px);
    border-color: var(--bs-magenta);
    background: var(--bs-glass-strong);
}
.overview-thumb__num {
    font-family: var(--bs-body);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    color: var(--bs-purple-light);
    font-weight: 600;
}
.overview-thumb__title {
    font-family: var(--bs-display);
    font-size: 0.95rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--bs-platinum);
    letter-spacing: -0.01em;
}

/* ─── ANIMACIONES ───────────────────────────────────────── */
.slide.is-active .bs-cover__title,
.slide.is-active .bs-headline,
.slide.is-active .bs-imagine__main,
.slide.is-active .bs-cta__brand {
    animation: bsLetterIn 1s var(--bs-ease) both;
}
.slide.is-active .bs-lead,
.slide.is-active .bs-cover__sub,
.slide.is-active .bs-cover__pills,
.slide.is-active .bs-pillars__grid,
.slide.is-active .bs-ba-grid,
.slide.is-active .bs-pillar-deep__layout,
.slide.is-active .bs-orchestra__viz,
.slide.is-active .bs-month-grid,
.slide.is-active .bs-role-layout,
.slide.is-active .bs-matrix,
.slide.is-active .bs-stories-grid,
.slide.is-active .bs-ritual-line,
.slide.is-active .bs-tangibles-grid,
.slide.is-active .bs-cta__action {
    animation: bsFadeUp 0.9s var(--bs-ease) 0.2s both;
}
@keyframes bsLetterIn {
    from { opacity: 0; transform: translateY(40px) scale(0.95); filter: blur(8px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes bsFadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes bsFadeUpMobile {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE · Mobile-first overrides
   Breakpoints:
   - default            → mobile (< 640px)
   - ≥ 640px (sm)       → mobile-grande / tablet pequeña
   - ≥ 768px (md)       → tablet
   - ≥ 1024px (lg)      → laptop
   - ≥ 1280px (xl)      → desktop full
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── DEFAULT · MOBILE FIRST (< 640px) ─────────────────── */
@media (max-width: 639.98px) {
    /* Performance: reducir backdrop-filter en mobile para evitar lag */
    .bs-pillar, .bs-week, .bs-tangible, .bs-story-card,
    .bs-ba-card, .bs-role-section, .bs-feat,
    .bs-pillar-deep__story, .overview-thumb,
    .bs-pillar-deep__hero, .bs-role-hero, .bs-orch-node {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .masthead {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .overview-modal {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Animaciones livianas en mobile · sin blur ni scale para evitar lag */
    .slide.is-active .bs-cover__title,
    .slide.is-active .bs-headline,
    .slide.is-active .bs-imagine__main,
    .slide.is-active .bs-cta__brand {
        animation: bsFadeUpMobile 0.5s ease both;
    }
    .slide.is-active .bs-lead,
    .slide.is-active .bs-cover__sub,
    .slide.is-active .bs-cover__pills,
    .slide.is-active .bs-pillars__grid,
    .slide.is-active .bs-ba-grid,
    .slide.is-active .bs-pillar-deep__layout,
    .slide.is-active .bs-orchestra__viz,
    .slide.is-active .bs-month-grid,
    .slide.is-active .bs-role-layout,
    .slide.is-active .bs-matrix,
    .slide.is-active .bs-stories-grid,
    .slide.is-active .bs-ritual-line,
    .slide.is-active .bs-tangibles-grid,
    .slide.is-active .bs-cta__action {
        animation: bsFadeUpMobile 0.5s ease 0.1s both;
    }
    .slide { transition: opacity 0.35s ease, visibility 0s linear 0.35s; transform: none !important; }
    .slide.is-active { transition: opacity 0.45s ease, visibility 0s linear; }
    /* Beams del fondo · reducir intensidad para mejor performance */
    .bs-bg__beam { filter: blur(80px); opacity: 0.3; }
    .bs-bg__photo { display: none; }
    .bs-bg__grid { display: none; }

    /* Wrappers · padding contado:
       masthead 50px + breath 20px = 70px arriba
       dots 38px + breath 12px = 50px abajo */
    .slide > .bs-cover,
    .slide > .bs-hook,
    .slide > .bs-truth,
    .slide > .bs-promise,
    .slide > .bs-manifest,
    .slide > .bs-before,
    .slide > .bs-after,
    .slide > .bs-pillars,
    .slide > .bs-pillar-deep,
    .slide > .bs-orchestra,
    .slide > .bs-month-one,
    .slide > .bs-bridge,
    .slide > .bs-role-card,
    .slide > .bs-role-matrix,
    .slide > .bs-stories,
    .slide > .bs-ritual,
    .slide > .bs-tangibles,
    .slide > .bs-imagine,
    .slide > .bs-cta {
        padding: 68px 1rem 60px;
        justify-content: flex-start;
        gap: 0.9rem;
    }
    /* Cover, manifest, hook, etc · centro vertical para impacto */
    .slide--cover > .bs-cover,
    .slide--hook > .bs-hook,
    .slide--truth > .bs-truth,
    .slide--promise > .bs-promise,
    .slide--manifest > .bs-manifest,
    .slide--bridge > .bs-bridge,
    .slide--imagine > .bs-imagine,
    .slide--cta > .bs-cta {
        justify-content: center;
    }

    /* Masthead compacta */
    .masthead__inner { padding: 0.5rem 0.7rem; }
    .masthead__logo { font-size: 0.85rem; letter-spacing: 0.02em; }
    .masthead__tagline, .masthead__divider { display: none; }
    .masthead__btn { width: 30px; height: 30px; font-size: 0.7rem; }
    .masthead__right { gap: 0.5rem; }
    .masthead__counter { font-size: 0.7rem; letter-spacing: 0.05em; }

    /* Tipografía mobile · clamp más conservador */
    .bs-headline {
        font-size: clamp(1.5rem, 7vw, 2.1rem);
        line-height: 1.12;
    }
    .slide--orchestra .bs-headline,
    .slide--pillar-deep .bs-headline {
        font-size: clamp(1.4rem, 6vw, 1.9rem);
    }
    .bs-headline--mega {
        font-size: clamp(1.9rem, 8.5vw, 2.6rem);
        line-height: 1.05;
    }
    .bs-cover__title {
        font-size: clamp(3.2rem, 18vw, 5.2rem);
        line-height: 0.95;
        letter-spacing: -0.03em;
    }
    .bs-cta__brand {
        font-size: clamp(2.8rem, 16vw, 4.4rem);
        line-height: 0.95;
    }
    .bs-imagine__main {
        font-size: clamp(1.4rem, 6.5vw, 2.1rem);
        line-height: 1.15;
    }
    .bs-lead { font-size: 0.92rem; line-height: 1.5; }
    .bs-kicker { font-size: 0.52rem; padding: 0.32rem 0.75rem; letter-spacing: 0.22em; }

    /* COVER */
    .bs-cover { gap: 0.7rem; }
    .bs-cover__brand-bar { gap: 0.4rem; margin-bottom: 0.2rem; }
    .bs-cover__brand-line { width: 24px; }
    .bs-cover__brand-text { font-size: 0.5rem; letter-spacing: 0.18em; }
    .bs-cover__sub { font-size: 0.95rem; line-height: 1.4; }
    .bs-cover__pills { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.3rem; margin-top: 0.8rem; }
    .bs-cover__pill { font-size: 0.55rem; padding: 0.32rem 0.7rem; letter-spacing: 0.1em; }
    .bs-cover__pill-dot { display: none; }
    .bs-cover__hint { display: none; }

    /* HOOK · quote mark más chica */
    .bs-quote-mark { font-size: 4rem; line-height: 0.4; margin-bottom: 0.2rem; }
    .bs-signature__line { width: 30px; }
    .bs-signature__text { font-size: 0.55rem; letter-spacing: 0.18em; }

    /* ANTES/DESPUÉS */
    .bs-ba-grid { grid-template-columns: 1fr; gap: 0.7rem; margin-top: 0.8rem; }
    .bs-ba-card { padding: 1.05rem 0.9rem; border-radius: 12px; }
    .bs-ba-card__lbl { font-size: 0.55rem; margin-bottom: 0.4rem; }
    .bs-ba-card__title { font-size: 1.05rem; line-height: 1.2; margin-bottom: 0.6rem; }
    .bs-ba-list { gap: 0.4rem; }
    .bs-ba-list li { font-size: 0.8rem; line-height: 1.45; padding-left: 1.2rem; }

    /* 5 PILARES · layout horizontal compacto */
    .bs-pillars__header { margin-bottom: 0.4rem; }
    .bs-pillars__grid { grid-template-columns: 1fr; gap: 0.5rem; margin-top: 0.8rem; }
    .bs-pillar {
        padding: 0.85rem 1rem;
        display: grid;
        grid-template-columns: 44px 1fr;
        gap: 0.8rem;
        text-align: left;
        align-items: center;
        border-radius: 12px;
    }
    .bs-pillar:hover { transform: none; }
    .bs-pillar__icon {
        width: 44px; height: 44px;
        font-size: 1.05rem;
        margin: 0;
        border-radius: 10px;
        grid-row: 1 / span 3;
    }
    .bs-pillar__num { grid-column: 2; font-size: 0.5rem; margin-bottom: 0; letter-spacing: 0.18em; }
    .bs-pillar__name { grid-column: 2; font-size: 1rem; margin-bottom: 0.1rem; line-height: 1; }
    .bs-pillar__tag { grid-column: 2; font-size: 0.72rem; line-height: 1.35; }

    /* PILAR DEEP · stack vertical compacto */
    .bs-pillar-deep__layout { grid-template-columns: 1fr; gap: 0.7rem; margin-top: 0.4rem; }
    .bs-pillar-deep__hero {
        padding: 0.95rem 0.95rem;
        display: grid;
        grid-template-columns: 48px 1fr;
        gap: 0.8rem;
        align-items: center;
        text-align: left;
        border-radius: 14px;
    }
    .bs-pillar-deep__hero-icon {
        width: 48px; height: 48px;
        font-size: 1.3rem;
        margin: 0;
        border-radius: 12px;
        grid-row: 1 / span 3;
    }
    .bs-pillar-deep__hero-num { grid-column: 2; font-size: 0.5rem; letter-spacing: 0.2em; margin: 0; }
    .bs-pillar-deep__hero-title { grid-column: 2; font-size: 1.2rem; margin: 0; line-height: 1; }
    .bs-pillar-deep__hero-tag { grid-column: 2; font-size: 0.74rem; line-height: 1.35; }
    .bs-pillar-deep__body { gap: 0.55rem; }
    .bs-pillar-deep__story { font-size: 0.85rem; padding: 0.6rem 0.85rem; line-height: 1.45; }
    .bs-pillar-deep__features { grid-template-columns: 1fr; gap: 0.4rem; }
    .bs-feat { padding: 0.5rem 0.7rem; gap: 0.5rem; border-radius: 8px; }
    .bs-feat__icon { font-size: 0.85rem; }
    .bs-feat__text { font-size: 0.74rem; line-height: 1.4; }

    /* ORQUESTA · viz adaptativo según viewport */
    .slide--orchestra > .bs-orchestra { gap: 0.5rem; }
    .bs-orchestra__viz { max-width: min(280px, 70vw); margin-top: 0.4rem; }
    .bs-orch-center__brand { font-size: 0.7rem; }
    .bs-orch-center__brand-360 { font-size: 1.3em; }
    .bs-orch-center__tag { font-size: 0.42rem; margin-top: 0.2rem; letter-spacing: 0.14em; }
    .bs-orch-node { border-width: 1.5px; }
    .bs-orch-node__name { font-size: 0.5rem; letter-spacing: 0.02em; }
    .bs-orch-node__icon { font-size: 0.75rem; margin-bottom: 0.1rem; }

    /* MES 1 · 4 semanas en columna */
    .bs-month-grid { grid-template-columns: 1fr; gap: 0.55rem; margin-top: 0.8rem; }
    .bs-week { padding: 0.95rem 1rem; border-radius: 11px; }
    .bs-week:hover { transform: none; }
    .bs-week__num { font-size: 1.6rem; }
    .bs-week__lbl { font-size: 0.5rem; margin-bottom: 0.5rem; padding-bottom: 0.4rem; }
    .bs-week__list { gap: 0.35rem; }
    .bs-week__list li { font-size: 0.74rem; line-height: 1.4; padding-left: 1rem; }

    /* ROLES · stack horizontal */
    .bs-role-layout { grid-template-columns: 1fr; gap: 0.7rem; margin-top: 0.6rem; }
    .bs-role-hero {
        padding: 1rem 1rem;
        display: grid;
        grid-template-columns: 52px 1fr;
        gap: 0.8rem;
        align-items: center;
        text-align: left;
    }
    .bs-role-hero__icon {
        width: 52px; height: 52px;
        font-size: 1.3rem;
        margin: 0;
        grid-row: 1 / span 3;
    }
    .bs-role-hero__name { grid-column: 2; font-size: 1.25rem; margin: 0; line-height: 1; }
    .bs-role-hero__sub { grid-column: 2; font-size: 0.55rem; margin: 0.15rem 0; letter-spacing: 0.14em; }
    .bs-role-hero__quote { grid-column: 1 / -1; font-size: 0.78rem; line-height: 1.4; margin-top: 0.4rem; padding-top: 0.5rem; border-top: 1px solid var(--bs-border); }
    .bs-role-body { gap: 0.5rem; }
    .bs-role-section { padding: 0.7rem 0.85rem; border-radius: 10px; }
    .bs-role-section__title { font-size: 0.5rem; margin-bottom: 0.3rem; letter-spacing: 0.18em; }
    .bs-role-section__body { font-size: 0.76rem; line-height: 1.45; }
    .bs-role-tags { gap: 0.3rem; margin-top: 0.4rem; }
    .bs-role-tag { font-size: 0.55rem; padding: 0.18rem 0.5rem; letter-spacing: 0; }

    /* MATRIZ · scroll horizontal con pista visual */
    .bs-role-matrix .bs-headline { text-align: center; }
    .bs-matrix {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        margin-top: 0.8rem;
        scrollbar-width: thin;
        scrollbar-color: var(--bs-purple-light) transparent;
        border-radius: 12px;
    }
    .bs-matrix::-webkit-scrollbar { height: 6px; }
    .bs-matrix::-webkit-scrollbar-thumb { background: var(--bs-purple); border-radius: 4px; }
    .bs-matrix-row { min-width: 560px; grid-template-columns: 1.3fr repeat(5, 0.85fr); }
    .bs-matrix-row > div { padding: 0.5rem 0.4rem; font-size: 0.66rem; }
    .bs-matrix-row > div:first-child { font-size: 0.72rem; padding-left: 0.6rem; }
    .bs-matrix-row--head > div { font-size: 0.5rem; letter-spacing: 0.1em; }
    .bs-matrix-cell--max { font-size: 0.85rem !important; }

    /* HISTORIAS */
    .bs-stories-grid { grid-template-columns: 1fr; gap: 0.6rem; margin-top: 0.8rem; }
    .bs-story-card { padding: 1rem 1rem; gap: 0.5rem; border-radius: 12px; }
    .bs-story-card:hover { transform: none; }
    .bs-story-avatar { width: 40px; height: 40px; font-size: 0.85rem; }
    .bs-story-name { font-size: 1rem; line-height: 1; }
    .bs-story-role { font-size: 0.55rem; letter-spacing: 0.14em; margin-bottom: 0.15rem; }
    .bs-story-text { font-size: 0.8rem; line-height: 1.45; }
    .bs-story-result { font-size: 0.7rem; padding-top: 0.5rem; }

    /* RITUAL · 4 pasos en columna */
    .bs-ritual-line { grid-template-columns: 1fr; gap: 0.85rem; margin-top: 1rem; }
    .bs-ritual-line::before { display: none; }
    .bs-ritual-step {
        padding: 0;
        display: grid;
        grid-template-columns: 48px 1fr;
        gap: 0.85rem;
        align-items: center;
        text-align: left;
    }
    .bs-ritual-step__num {
        width: 48px; height: 48px;
        font-size: 1.05rem;
        margin: 0;
        grid-row: 1 / span 2;
    }
    .bs-ritual-step__title { grid-column: 2; font-size: 0.9rem; margin: 0; line-height: 1.1; }
    .bs-ritual-step__desc { grid-column: 2; font-size: 0.74rem; line-height: 1.45; margin-top: 0.15rem; }

    /* TANGIBLES · 2 cols compactos */
    .bs-tangibles-grid { grid-template-columns: repeat(2, 1fr); gap: 0.45rem; margin-top: 0.8rem; }
    .bs-tangible { padding: 0.7rem 0.55rem; border-radius: 10px; }
    .bs-tangible:hover { transform: none; }
    .bs-tangible__icon { font-size: 1.2rem; margin-bottom: 0.3rem; }
    .bs-tangible__name { font-size: 0.78rem; margin-bottom: 0.2rem; line-height: 1.1; }
    .bs-tangible__desc { font-size: 0.62rem; line-height: 1.3; }

    /* CTA · botón grande con touch target */
    .bs-cta__action {
        padding: 0.95rem 1.6rem;
        font-size: 1.05rem;
        margin-top: 1.2rem;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    .bs-cta__contacts { gap: 0.5rem; margin-top: 1.2rem; flex-direction: column; }
    .bs-cta__contact { font-size: 0.7rem; letter-spacing: 0.06em; }

    /* IMAGINE · centrado vertical */
    .bs-imagine .bs-lead { font-size: 0.88rem; }

    /* NAV · esquinas inferiores · al mismo nivel que dots, sin tapar contenido */
    .nav-btn {
        width: 34px; height: 34px;
        font-size: 0.7rem;
        top: auto;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 0.45rem);
        transform: none;
        border-radius: 50%;
        background: rgba(26,8,51,0.92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .nav-btn--prev { left: 0.5rem; }
    .nav-btn--next { right: 0.5rem; }
    .nav-btn:hover { transform: none; }

    /* DOTS · centrados, sin chocar con nav-btn de los corners */
    .dots {
        padding: 5px 8px;
        gap: 4px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 0.55rem);
        max-width: calc(100vw - 96px);
        border-radius: 24px;
    }
    .dot { width: 6px; height: 6px; }
    .dot.is-active { width: 18px; }

    /* Footer y numerito ocultos · ya tenemos counter en masthead */
    .slide-footer { display: none !important; }
    .slide::after { display: none; }

    /* Overview modal · 2 cols con cards más bajitos */
    .overview-modal { padding: 1rem 0.8rem; }
    .overview-modal__grid { grid-template-columns: repeat(2, 1fr); gap: 0.55rem; }
    .overview-thumb { padding: 0.7rem; aspect-ratio: 4/3; border-radius: 8px; }
    .overview-thumb__num { font-size: 0.55rem; }
    .overview-thumb__title { font-size: 0.78rem; line-height: 1.2; }
}

/* ─── < 380px · mobile pequeño (iPhone SE, etc) ────────── */
@media (max-width: 379.98px) {
    .slide > .bs-cover,
    .slide > .bs-hook,
    .slide > .bs-truth,
    .slide > .bs-promise,
    .slide > .bs-manifest,
    .slide > .bs-pillars,
    .slide > .bs-pillar-deep,
    .slide > .bs-orchestra,
    .slide > .bs-month-one,
    .slide > .bs-bridge,
    .slide > .bs-role-card,
    .slide > .bs-role-matrix,
    .slide > .bs-stories,
    .slide > .bs-ritual,
    .slide > .bs-tangibles,
    .slide > .bs-imagine,
    .slide > .bs-cta {
        padding: 64px 0.85rem 56px;
    }
    .bs-headline { font-size: 1.4rem; }
    .bs-headline--mega { font-size: 1.75rem; }
    .bs-cover__title { font-size: 2.8rem; line-height: 0.95; }
    .bs-cta__brand { font-size: 2.4rem; }
    .bs-cover__sub { font-size: 0.88rem; }
    .bs-cover__pills { flex-direction: column; gap: 0.3rem; }
    .bs-orchestra__viz { max-width: 230px; }
    .bs-orch-center__brand { font-size: 0.62rem; }
    .bs-orch-node__name { font-size: 0.45rem; }
    .nav-btn { width: 32px; height: 32px; font-size: 0.68rem; }
    .masthead__btn { width: 28px; height: 28px; }
    .overview-modal__grid { grid-template-columns: 1fr; }
    .bs-tangible__desc { font-size: 0.58rem; }
}

/* ─── ≥ 640px · sm (tablet pequeña) ─────────────────────── */
@media (min-width: 640px) and (max-width: 767.98px) {
    .bs-pillars__grid { grid-template-columns: repeat(2, 1fr); }
    .bs-pillars__grid > .bs-pillar:nth-child(5) { grid-column: 1 / -1; max-width: 50%; justify-self: center; }
    .bs-month-grid { grid-template-columns: repeat(2, 1fr); }
    .bs-tangibles-grid { grid-template-columns: repeat(3, 1fr); }
    .bs-stories-grid { grid-template-columns: 1fr; }
    .bs-ba-grid { grid-template-columns: 1fr; }
    .bs-pillar-deep__layout { grid-template-columns: 1fr; }
    .bs-pillar-deep__features { grid-template-columns: repeat(2, 1fr); }
    .bs-role-layout { grid-template-columns: 1fr; }
    .bs-ritual-line { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
    .bs-ritual-line::before { display: none; }
    .masthead__tagline { display: none; }
}

/* ─── ≥ 768px · md (tablet) ─────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .bs-pillars__grid { grid-template-columns: repeat(3, 1fr); }
    .bs-pillars__grid > .bs-pillar:nth-child(4) { grid-column: 1 / 2; }
    .bs-pillars__grid > .bs-pillar:nth-child(5) { grid-column: 2 / 4; max-width: none; }
    .bs-pillar-deep__layout { grid-template-columns: 240px 1fr; gap: 1.2rem; }
    .bs-ba-grid { grid-template-columns: 1fr 1fr; }
    .bs-month-grid { grid-template-columns: repeat(2, 1fr); }
    .bs-role-layout { grid-template-columns: 1fr; }
    .bs-stories-grid { grid-template-columns: 1fr 1fr; }
    .bs-stories-grid > .bs-story-card:nth-child(3) { grid-column: 1 / -1; max-width: 50%; justify-self: center; }
    .bs-tangibles-grid { grid-template-columns: repeat(3, 1fr); }
    .bs-ritual-line { grid-template-columns: repeat(4, 1fr); }
    .masthead__tagline { display: none; }
    .bs-matrix { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .bs-matrix-row { min-width: 700px; }
}

/* ─── ≥ 1024px · lg (laptop) ────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .bs-pillar-deep__layout { grid-template-columns: 260px 1fr; }
    .masthead__tagline { font-size: 0.62rem; }
}

/* ─── ≥ 1280px · xl (desktop full) ──────────────────────── */
@media (min-width: 1280px) {
    .bs-pillar-deep__layout { grid-template-columns: 280px 1fr; }
}

/* ─── Pantallas bajitas (laptops 768px alto) ─────────────── */
@media (max-height: 800px) and (min-width: 1024px) {
    .slide > .bs-cover,
    .slide > .bs-pillar-deep,
    .slide > .bs-orchestra,
    .slide > .bs-month-one,
    .slide > .bs-role-card,
    .slide > .bs-tangibles {
        padding-top: 65px;
        padding-bottom: 3.5rem;
    }
    .slide--pillar-deep .bs-headline,
    .slide--orchestra .bs-headline {
        font-size: clamp(1.4rem, 2.4vw, 2rem);
    }
    .bs-pillar-deep__layout { gap: 1rem; }
    .bs-pillar-deep__hero { padding: 1.1rem 1rem; }
    .bs-orchestra__viz { max-width: 380px; }
    .bs-cover__title { font-size: clamp(4rem, 11vw, 8rem); }
}

/* ─── PRINT ─────────────────────────────────────────────── */
@media print {
    .masthead, .nav-btn, .dots, .slide-footer, .overview-modal { display: none !important; }
    .slide {
        position: relative !important;
        opacity: 1 !important; visibility: visible !important;
        transform: none !important;
        page-break-after: always;
        height: 100vh;
    }
}