/* ══════════════════════════════════════════════════
   Introduction Full-Page Section
   Layout: headline → video card → sub → Q&A
   Fuentes y colores idénticos al resto del theme
   ══════════════════════════════════════════════════ */

/* ── Fade transitions — Alpine x-transition ── */
.intro-page-enter,
.intro-page-leave {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.intro-page-enter-start,
.intro-page-leave-end   { opacity: 0; }
.intro-page-enter-end,
.intro-page-leave-start { opacity: 1; }

/* Main content, hidden while the introduction overlay is up.
   Same 0.35s fade the old x-transition classes gave, but visibility instead of
   display, so the block keeps its space and the footer below it stays put.
   The visibility delay lets the fade finish before the box stops responding. */
#ngp-main-content {
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#ngp-main-content.ngp-main-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.35s;
}

.ngp-main-enter,
.ngp-main-leave {
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ngp-main-enter-start,
.ngp-main-leave-end   { opacity: 0; }
.ngp-main-enter-end,
.ngp-main-leave-start { opacity: 1; }

/* ── Overlay container ── */
.intro-page {
    position: fixed;
    inset: 0;
    z-index: 900; /* below header (1000+) */
    overflow-y: auto;
    background-color: var(--ngp-black);
    background-image: url('../images/home/curriculum/modulo-career-pathways/FONDO CAREER LOGED IN.jpeg');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #fff;
    font-family: 'Circular Std';
}

.intro-page-inner {
    /* No position: relative — para que .intro-page-back (absolute) se posicione
       respecto a .intro-page (position: fixed), no respecto a este contenedor
       centrado. El botón Back queda en la esquina top-left del viewport. */
    max-width: 1100px;
    margin: 0 auto;
    padding: calc(var(--ngp-total-h, 120px) + 2.5rem) 2rem 5rem;
    text-align: center;
}

/* ── Back button — subtle top-left dentro del contenedor ── */
.intro-page-back {
    position: absolute;
    top: calc(var(--ngp-total-h, 120px) + 0.75rem);
    left: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ngp-gold);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Circular Std';
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0.4rem 0;
    opacity: 0.85;
    transition: opacity 0.2s, transform 0.2s;
}
.intro-page-back:hover {
    opacity: 1;
    transform: translateX(-3px);
}
.intro-page-back svg { stroke: var(--ngp-gold); }

/* ── Headline (gold, large, centered) ── */
.intro-page-headline {
    font-family: 'Circular Std';
    font-size: clamp(1.875rem, 4vw, 3.25rem);
    line-height: 1.18;
    letter-spacing: -0.005em;
    color: var(--ngp-gold);
    white-space: pre-line;
    max-width: 920px;
    margin: 0 auto 2.5rem;
}

/* ── Video Card (contained, gold border, rounded) ── */
.intro-page-video-card {
    position: relative;
    width: min(900px, 100%);
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    border: 2px solid var(--ngp-gold);
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 60px rgba(216, 185, 125, 0.12);
}
.intro-page-video {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

/* ── Sub text — "Message from..." debajo del video ── */
.intro-page-sub {
    font-family: 'Circular Std';
    font-size: 1.7rem;
    color: #fff;
    letter-spacing: 0.01em;
    margin: 1.75rem auto 0;
}

/* ── Q&A Section ── */
.intro-page-content {
    max-width: 760px;
    margin: 4.5rem auto 0;
    padding: 0;
}

.intro-page-qa-block {
    padding: 2.25rem 0;
    text-align: center;
}
.intro-page-qa-block + .intro-page-qa-block {
    margin-top: 0;
}

.intro-page-qa-q {
    font-family: 'Circular Std';
    font-size: clamp(1.5rem, 1.8vw, 1.8rem);
    color: var(--ngp-gold);
    margin: 0 0 1.1rem;
    letter-spacing: 0.005em;
}

.intro-page-qa-a {
    font-family: 'Circular Std';
    font-size: 0.9375rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    max-width: 640px;
    margin: 0 auto;
}

/* ── Feature image (decorativa, central) ── */
.intro-page-feature-image-wrap {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
}

.intro-page-feature-image {
    max-width: 935px;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* ── Tablet ── */
@media (max-width: 1023px) {
    .intro-page-inner {
        padding: calc(var(--ngp-total-h, 120px) + 1.75rem) 1.5rem 4rem;
    }
    .intro-page-headline { margin-bottom: 2rem; }
    .intro-page-content  { margin-top: 3.5rem; }
}

/* ── Mobile ── */
@media (max-width: 767px) {
    .intro-page-inner {
        padding: calc(var(--ngp-total-h, 64px) + 3rem) 1.25rem 3rem;
    }
    .intro-page-back {
        position: static;
        display: inline-flex;
        margin: 0 0 1.5rem;
        font-size: 0.65rem;
    }
    .intro-page-headline {
        font-size: clamp(1.5rem, 6vw, 2.125rem);
        margin-bottom: 1.75rem;
    }
    .intro-page-video-card {
        border-width: 1px;
        border-radius: 6px;
    }
    .intro-page-sub {
        font-size: 0.9375rem;
        margin-top: 1.25rem;
    }
    .intro-page-content {
        margin-top: 3rem;
        max-width: 100%;
    }
    .intro-page-qa-block { padding: 1.75rem 0; }
    .intro-page-qa-q     { font-size: 1.0625rem; margin-bottom: 0.85rem; }
    .intro-page-qa-a     { font-size: 0.875rem; line-height: 1.7; }
    .intro-page-feature-image-wrap { margin-top: 2.5rem; }
}