/*<--------------------------------------------------->
<!-- ModeloCrecimiento (section component)          -->
<!----------------------------------------------------->
* Description:
    Section 08 | Modelo de crecimiento.
    Interactive sigmoid growth chart with 3 DEV nodes,
    floating cards, animated track, and closing info cards.
    Desktop/tablet (>=768px): diagonal band, floating cards.
    Mobile (<768px): vertical timeline with accordion cards.
* Dependencies:
    - style.css (custom properties, sectionHeader, .content)
    - modelo-crecimiento.js
<!--------------------------------------------------->*/

/*###################################################*/
/*...................................................*/
/* Section shell                                     */
/*...................................................*/
/*###################################################*/

.modeloCrecimiento {
    display: flex;
    align-items: center;
    justify-content: center;

    & > .content {
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        /* Air before next section */
        padding-bottom: clamp(5rem, 10vh, 8rem);
    }
}

/*###################################################*/
/*...................................................*/
/* Body wrapper — 30% narrower than header          */
/* Header uses full sectionHeader width.             */
/* Everything below (intro, stage, nav, cards)       */
/* is constrained to 70% of the content area.        */
/*###################################################*/

.mcBody {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    @media (min-width: 991px) {
        max-width: 72%;
    }
}

/*###################################################*/
/*...................................................*/
/* Intro copy                                        */
/*...................................................*/
/*###################################################*/

.mcIntro {
    padding: 0 0.5rem;
    max-width: 52rem;

    @media (min-width: 768px) {
        padding: 0 2rem;
    }
}

.mcIntroParagraph {
    margin: 0 0 1rem;
    font-family: var(--font-body);
    font-size: clamp(0.82rem, 0.95vw, 0.96rem);
    line-height: 1.72;
    color: hsla(0, 30%, 96%, 0.55);

    &:first-of-type {
        color: hsla(0, 30%, 96%, 0.72);
    }
}

/*###################################################*/
/*...................................................*/
/* Chart stage                                       */
/*###################################################*/

.mcStage {
    position: relative;
    width: 100%;
    margin-top: 2.5rem;

    @media (min-width: 768px) {
        height: 600px;
    }
}

/*------- SVG band (desktop only) -------*/

.mcBandSvg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    display: none;

    @media (min-width: 768px) {
        display: block;
    }
}

/*------- Dashed connectors -------*/

.mcConnector {
    transition: opacity 0.28s ease;
}

/*###################################################*/
/*...................................................*/
/* Nodes (desktop only)                              */
/*###################################################*/

.mcNode {
    position: absolute;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    /* center the element on the curve coordinate */
    transform: translate(-50%, -50%);
    z-index: 2;

    &:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 4px;
        border-radius: 4px;
    }

    @media (min-width: 768px) {
        display: flex;
    }
}

/* Sigmoid curve coordinates — t=0.15, t=0.50, t=0.85 */
.mcNode[data-dev="1"] { left: 14.8%; top: 75.7%; }
.mcNode[data-dev="2"] { left: 50%;   top: 50%;   }
.mcNode[data-dev="3"] { left: 85.9%; top: 22.8%; }

.mcNodeSeed {
    width: 2.6rem;
    height: 2.6rem;
    transform-origin: center center;
    /* ONLY filter transitions on inactive — no transform transition.
       This prevents the "spin back" animation when deactivating.
       The transform transition is added only in the .active state below. */
    transition: filter 0.3s ease;
    color: hsla(0, 30%, 96%, 0.18);
    filter: none;
}

.mcNode.active .mcNodeSeed {
    color: var(--primary);
    filter: drop-shadow(0 0 12px hsla(25, 96%, 50%, 0.6));
    transform: rotate(180deg);
    /* Spring rotation only on activation — removed on deactivation */
    transition: filter 0.3s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Label hangs below the seed — absolutely positioned so transform: translate(-50%,-50%)
   on the parent centers ONLY the seed icon on the curve coordinate */
.mcNodeLabel {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 5px;
    opacity: 0.42;
    filter: grayscale(1) saturate(0) brightness(0.72);
    transition: opacity 0.25s ease, filter 0.25s ease;
}

.mcNode.active .mcNodeLabel {
    opacity: 1;
    filter: none;
}

.mcNodeLogo {
    display: block;
    width: 2.9rem;
    height: auto;
}

/*###################################################*/
/*...................................................*/
/* Desktop: Floating cards                           */
/*###################################################*/

.mcCards {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* above nodes (z:2) and band (z:auto) */
    z-index: 3;

    @media (min-width: 768px) {
        display: block;
    }
}

/*
  JS-off fallback: DEV 1 card visible by default.
  Once JS runs it adds .js-ready to the section,
  at which point JS fully controls card visibility.
*/
.mcCard[data-dev="1"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mcCard {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    background: hsla(0, 0%, 9%, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid hsla(0, 0%, 100%, 0.1);
    border-radius: 6px;
    padding: 0.85rem 1rem;
    width: min(400px, 42%);

    &.active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* JS-ready: JS controls all card visibility */
.js-ready .mcCard[data-dev="1"] {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.js-ready .mcCard.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/*
  Card positions — placed to avoid covering their own node.
  Stage: 600px tall. Node positions (CSS % on the stage):
    DEV 1 node: left 14.8%, top 75.7%  (bottom-left of sigmoid)
    DEV 2 node: left 50%,   top 50%    (center of sigmoid)
    DEV 3 node: left 85.9%, top 22.8%  (upper-right of sigmoid)
  Cards are positioned on the opposite side of the curve from their node.
  Width uses min(290px, 26%) so cards scale proportionally with the narrower
  mcBody stage (72% of viewport) matching the prototype's 26% ratio.
*/
.mcCard[data-dev="1"] {
    top: -5%;
    left: 1%;
}

.mcCard[data-dev="2"] {
    top: -5%;
    left: 3%;
}

.mcCard[data-dev="3"] {
    top: -5%;
    left: 30%;
}

.mcCardLabel {
    margin: 0 0 0.28rem;
}

.mcCardLogo {
    display: block;
    width: 2.55rem;
    height: auto;
}

.mcCardTitle {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.25;
    color: hsla(0, 30%, 96%, 0.95);
}

.mcCardList {
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}

.mcCardItem {
    display: flex;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.7rem;
    line-height: 1.45;
    color: hsla(0, 30%, 96%, 0.62);

    &::before {
        content: '—';
        color: var(--primary);
        flex-shrink: 0;
    }
}

.mcCardFooter {
    margin: 0;
    padding-top: 0.45rem;
    border-top: 1px solid hsla(0, 0%, 100%, 0.07);
    font-family: var(--font-body);
    font-size: 0.6rem;
    line-height: 1.5;
    color: hsla(0, 30%, 96%, 0.36);
    font-style: italic;
}

/*###################################################*/
/*...................................................*/
/* Mobile: Vertical timeline accordion               */
/*###################################################*/

.mcTimeline {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 2.5rem 0.5rem 3rem 0.5rem;

    @media (min-width: 768px) {
        display: none;
    }
}

/* Vertical track line — gray base behind seed column */
.mcTimelineTrack {
    position: absolute;
    /* center on the seed icon (seed is 2rem wide at x=0.5rem) */
    left: calc(0.5rem + 1rem);
    top: 0;
    bottom: 0;
    width: 2px;
    background: hsla(0, 0%, 100%, 0.1);
    pointer-events: none;
}

/* Dotted progress overlay — grows to active seed via JS */
.mcTimelineTrackProgress {
    position: absolute;
    top: 0;
    left: -1px;
    width: 2px;
    height: 0%;
    background: none;
    border-left: 2px dotted hsla(25, 96%, 50%, 0.4);
    transition: height 0.38s ease;
}

.mcTimelineItem {
    position: relative;
}

.mcTimelineTrigger {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 1rem 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;

    &:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
        border-radius: 3px;
    }
}

.mcTimelineSeed {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    transform-origin: center center;
    /* Same spin-on-activate-only pattern as desktop */
    transition: filter 0.3s ease;
    color: hsla(0, 30%, 96%, 0.2);
}

.mcTimelineItem.active .mcTimelineSeed {
    color: var(--primary);
    filter: drop-shadow(0 0 8px hsla(25, 96%, 50%, 0.5));
    transform: rotate(180deg);
    transition: filter 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mcTimelineTriggerLabel {
    opacity: 0.42;
    filter: grayscale(1) saturate(0) brightness(0.72);
    transition: opacity 0.25s ease, filter 0.25s ease;
}

.mcTimelineItem.active .mcTimelineTriggerLabel {
    opacity: 1;
    filter: none;
}

.mcTimelineLogo {
    display: block;
    width: 3.3rem;
    height: auto;
}

/* JS-off fallback: first panel open by default */
.mcTimelineItem:first-child .mcTimelinePanel {
    max-height: 640px;
}

.mcTimelinePanel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.38s ease;
    /* indent past the seed icon + gap */
    padding-left: 2.85rem;
}

.mcTimelineItem.active .mcTimelinePanel {
    max-height: 640px;
}

/* JS-ready: JS controls all panel visibility */
.js-ready .mcTimelineItem:first-child .mcTimelinePanel {
    max-height: 0;
}

.js-ready .mcTimelineItem.active .mcTimelinePanel {
    max-height: 640px;
}

.mcTimelinePanelInner {
    padding: 0.75rem 1rem 1.25rem;
    background: hsla(0, 0%, 9%, 0.7);
    border: 1px solid hsla(0, 0%, 100%, 0.09);
    border-radius: 5px;
    margin-bottom: 0.5rem;
}

/*###################################################*/
/*...................................................*/
/* Year labels (desktop — below stage, above nav)   */
/*###################################################*/

.mcYearNav {
    display: none;

    @media (min-width: 768px) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.6rem 0 0;
    }
}

.mcYearNavBtn {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: hsla(0, 30%, 96%, 0.25);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0;
    transition: color 0.2s ease;

    &:hover {
        color: hsla(0, 30%, 96%, 0.6);
    }

    &.active {
        color: var(--primary);
    }

    &:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 3px;
        border-radius: 2px;
    }
}

/*###################################################*/
/*...................................................*/
/* Navigation (arrows + dots) — shared              */
/*###################################################*/

.mcNav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.mcNavBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid hsla(0, 0%, 100%, 0.15);
    background: hsla(0, 0%, 100%, 0.04);
    color: hsla(0, 30%, 96%, 0.55);
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;

    &:hover:not(:disabled) {
        background: hsla(0, 0%, 100%, 0.09);
        color: hsla(0, 30%, 96%, 0.9);
        border-color: hsla(0, 0%, 100%, 0.28);
    }

    &:disabled {
        opacity: 0.25;
        cursor: not-allowed;
    }

    &:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 3px;
    }
}

.mcNavDots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mcNavDot {
    height: 7px;
    border-radius: 999px;
    background: hsla(0, 0%, 100%, 0.2);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: width 0.28s ease, background 0.28s ease;
    width: 7px;

    &.active {
        width: 22px;
        background: var(--primary);
    }

    &:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 3px;
    }
}

/*###################################################*/
/*...................................................*/
/* Closing info cards grid                           */
/*###################################################*/

.mcClosingCards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    margin-top: 3rem;
    border: 1px solid hsla(0, 0%, 100%, 0.08);
    border-radius: 6px;
    overflow: hidden;

    @media (min-width: 768px) {
        grid-template-columns: repeat(3, 1fr);
    }
}

.mcClosingCard {
    padding: 1.75rem 1.5rem;
    background: hsla(0, 0%, 8%, 0.6);
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.07);

    &:last-child {
        border-bottom: none;
    }

    @media (min-width: 768px) {
        border-bottom: none;
        border-right: 1px solid hsla(0, 0%, 100%, 0.07);

        &:last-child {
            border-right: none;
        }
    }
}

.mcClosingCardLabel {
    display: block;
    margin: 0 0 0.85rem;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: hsla(0, 30%, 96%, 0.38);

    & .mcClosingCardPrefix {
        color: var(--primary-mono);
        margin-right: 0.3em;
    }
}

.mcClosingCardText {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(0.82rem, 0.9vw, 0.92rem);
    line-height: 1.68;
    color: hsla(0, 30%, 96%, 0.6);
}

/*###################################################*/
/*...................................................*/
/* Reduced motion                                    */
/*...................................................*/
/*###################################################*/

@media (prefers-reduced-motion: reduce) {
    .mcConnector,
    .mcCard,
    .mcTimelineTrackProgress {
        transition: none;
    }

    .mcNodeSeed {
        transition: filter 0.3s ease;
    }

    .mcNode.active .mcNodeSeed {
        transform: none;
        transition: filter 0.3s ease;
    }

    .mcTimelineSeed {
        transition: filter 0.3s ease;
    }

    .mcTimelineItem.active .mcTimelineSeed {
        transform: none;
        transition: filter 0.3s ease;
    }

    .mcTimelinePanel {
        transition: none;
    }
}