/* TEDIC Historia Programa Block — Wave 99 jul-27
 *
 * Spec Figma: timeline horizontal con N nodos (default 7).
 * Cada nodo = punto circular (16px ⌀ #564FFF) + connector 184px wide + 2px height.
 * Bajo cada punto: año bold #564FFF + título hito + descripción gris.
 *
 * Architecture (Wave 90 v9 + Wave 96):
 * - section.full-width: left=0 width=viewport
 * - content interior: margin-left scale 80/110/150/230
 * - section.padding: 80-96px
 */

.historia-programa-block {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 64px 0 64px !important;       /* Wave 144: spec simétrico 64/64 */
    background-color: #FFFFFF !important;
    box-sizing: border-box !important;
}

/* Title + eyebrow */
.historia-programa-block .historia-programa-title {
    font-family: Lato, sans-serif !important;
    font-size: 1.875rem !important;        /* 30px */
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #1A1A2E !important;
    margin: 0 0 48px 0 !important;
    padding: 0 !important;
    letter-spacing: normal !important;
}

.historia-programa-block .historia-programa-eyebrow {
    display: block !important;
    font-family: Lato, sans-serif !important;
    font-size: 0.875rem !important;        /* 14px */
    font-weight: 500 !important;
    color: #4F46E5 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 16px !important;
}

.historia-programa-block .historia-programa-h2-text {
    display: block !important;
}

/* Wave 131 jul-28: Timeline flex container con scroll horizontal
   Línea CONTINUA via ::before que pasa por detrás de todos los nodos */
.historia-programa-block .historia-programa-timeline {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    width: max-content !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 8px !important;
    scrollbar-width: thin !important;
    position: relative !important;
}

.historia-programa-block .historia-programa-timeline::before {
    content: '' !important;
    position: absolute !important;
    left: 7px !important;                   /* inicio después del primer nodo centrado */
    right: 7px !important;                  /* final antes del último nodo centrado */
    top: 6px !important;                     /* centro vertical del point (14/2 - 1 = 6) */
    height: 2px !important;
    background-color: #7B8AFF !important;
    z-index: 0 !important;
}

.historia-programa-block .historia-programa-timeline::-webkit-scrollbar {
    height: 6px !important;
}

.historia-programa-block .historia-programa-timeline::-webkit-scrollbar-thumb {
    background-color: #7B8AFF !important;
    border-radius: 3px !important;
}

/* Wave 131 jul-28: Nodo = point + content stacked, texto LEFT-ALIGNED
   Spec OFICIAL: imagen enviada por user, nodo color #3B4EF5, texto izq
   Ancho fijo ~160px por nodo, scroll horizontal para 7+ nodos */
.historia-programa-block .historia-programa-node {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;     /* texto left-align */
    flex: 0 0 160px !important;             /* ancho fijo por nodo */
    width: 160px !important;
    min-width: 160px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    text-align: left !important;
    margin-right: 32px !important;           /* Wave 137: gap entre items 0 -> 32px */
}

/* Punto circular — Spec OFICIAL: #3B4EF5 (azul indigo), 14-16px
   Wave 131b: z-index alto para estar encima de la línea continua ::before */
.historia-programa-block .historia-programa-point {
    width: 14px !important;
    height: 14px !important;
    background-color: #3B4EF5 !important;
    border-radius: 50% !important;
    margin-bottom: 10px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Wave 131 jul-28: REMOVIDO is-future atenuado (spec oficial no tiene nodo atenuado) */

/* Content vertical bajo el punto — Spec OFICIAL: align-items flex-start (izquierda) */
.historia-programa-block .historia-programa-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.historia-programa-block .historia-programa-year {
    font-family: Lato, sans-serif !important;
    font-size: 1rem !important;             /* Wave 137: 14px -> 16px */
    font-weight: 700 !important;
    color: #3B4EF5 !important;             /* spec OFICIAL */
    margin: 0 0 8px 0 !important;          /* spec ~8-10px */
    padding: 0 !important;
    line-height: 1.3 !important;
}

.historia-programa-block .historia-programa-node-title {
    font-family: Lato, sans-serif !important;
    font-size: 0.9375rem !important;       /* Wave 137: 13px -> 15px */
    font-weight: 700 !important;
    color: #1A1A1A !important;            /* spec OFICIAL */
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
}

.historia-programa-block .historia-programa-desc {
    font-family: Lato, sans-serif !important;
    font-size: 0.9375rem !important;       /* Wave 137: 13px -> 15px */
    font-weight: 400 !important;
    color: #4B5563 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* Connector legacy — Wave 131c REMOVIDO
   Reemplazado por ::before del container .historia-programa-timeline
   (línea continua única) */
.historia-programa-block .historia-programa-connector {
    display: none !important;
}

/* Responsive — tablet 768-1023: nodos más chicos */
@media (max-width: 1023px) and (min-width: 768px) {
    .historia-programa-block .historia-programa-node {
        min-width: 80px !important;
        max-width: 130px !important;
    }
    .historia-programa-block .historia-programa-desc {
        font-size: 0.75rem !important;
    }
}

/* Wave 132 jul-28: Mobile <768: timeline horizontal CON scroll horizontal
   Mantiene layout horizontal (NO vertical) para que el scroll funcione.
   Scroll horizontal SOLO para timeline (per user feedback). */
@media (max-width: 767px) {
    .historia-programa-block {
        padding: 56px 0 64px !important;
    }
    .historia-programa-block .historia-programa-title {
        font-size: 1.5rem !important;
        margin-bottom: 32px !important;
    }
    .historia-programa-block .historia-programa-timeline {
        flex-direction: row !important;
        align-items: flex-start !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        padding: 0 16px 16px 16px !important;
        width: 100% !important;
        min-width: 100% !important;
        gap: 12px !important;
    }
    .historia-programa-block .historia-programa-node {
        flex: 0 0 140px !important;
        width: 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        scroll-snap-align: start !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 0 !important;
    }
    .historia-programa-block .historia-programa-point {
        margin: 0 0 10px 0 !important;
        flex-shrink: 0 !important;
    }
    .historia-programa-block .historia-programa-content {
        align-items: flex-start !important;
        text-align: left !important;
    }
    .historia-programa-block .historia-programa-timeline::-webkit-scrollbar {
        height: 4px !important;
    }
    .historia-programa-block .historia-programa-timeline::-webkit-scrollbar-thumb {
        background-color: #7B8AFF !important;
        border-radius: 2px !important;
    }
    .historia-programa-block .historia-programa-connector {
        display: none !important;
    }
}