/* =============================
    Variables (opcional)
    ============================= */
:root {
    --tl-white: #fff;
    --tl-white-25: rgba(255, 255, 255, .25);
    --tl-white-08: rgba(255, 255, 255, .08);
    --tl-gap: 32px;
    --tl-dot-size: 12px;
    --tl-font-title: 'Source Serif Pro', serif;

    /* NUEVO: grosor de la línea para poder centrarla exactamente con los dots */
    --tl-line-thickness: 2px;
}

/* =============================
    Carrusel (wrapper / swiper)
    ============================= */
.timeline-wrapper {
    position: relative;
    width: 100%;
}

.soct-timeline.swiper {
  overflow: visible;
}

.soct-timeline .swiper-slide {
    display: flex;
    justify-content: center;
    /* height: -webkit-fill-available; */
}
/* =============================
    Slide (tarjeta de hito)
    ============================= */
.hito-slide {
    /* max-width: 910px; */
    width: 100%;
    display: flex;
}
.swiper-wrapper{
    height: 250px;
}

.titulo-linea-tiempo{
    font-weight: 500 !important;
}
.hito-img {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 4/3;
}

.hito-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hito-text {
    width: 100%;
    padding: 20px 30px;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hito-year {
  font-size: 80px !important;
  line-height: 1;
  color: white !important;
  margin: 0 !important;
  margin-bottom: 20px !important;
}

.hito-title {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.2;
  margin: 0;
  margin-bottom: 20px;
  color: white;
}

.hito-desc p {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.5;
  color: white !important;
}

.hito-desc ul{
  margin: 0;
  padding-left: 20px;
  color: white !important;
}
.hito-desc ul li{
  color: white !important;
}

/* =============================
    Timeline nav (línea + dots)
    ============================= */
.timeline-nav {
  position: relative;
  margin-top: 70px;
}

.timeline-line {
  position: absolute;
  left: 0;
  right: 0;
  /* ANTES: top: 3px; 
     AHORA: centrado respecto a un dot de 8px y línea de var(--tl-line-thickness) */
  top: calc(8px / 2 - var(--tl-line-thickness) / 2);
  height: var(--tl-line-thickness);
  background-color: var(--tl-white-25);
}

.timeline-line-fill {
  position: absolute;
  left: 0;
  /* ANTES: top: 3px;
     AHORA: mismo centrado que la base */
  top: calc(8px / 2 - var(--tl-line-thickness) / 2);
  height: var(--tl-line-thickness);
  width: 0;
  background-color: var(--tl-white);
  transition: width .35s ease;
}

/* Lista de años */
.timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.timeline-item {
  position: relative;
  text-align: center;
  cursor: pointer;
}

.timeline-item .label {
  position: absolute;
  top: -44px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  margin-bottom: 8px;
  color: rgb(78 95 130);
  font-size: 1.5rem;
  position: absolute;
}

.timeline-item .dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgb(78 95 130);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  transition: all .25s;
}

.timeline-item.is-active .dot {
  transform: scale(1.25);
  background-color: white;
}

.timeline-item.is-active .label {
  color: white;
}

/* Segmentos entre dots */
.timeline-item:not(:last-child) .segment {
  position: absolute;
  bottom: 3px;
  width: 100%;
  height: 2px;
  background-color: rgb(78 95 130);
}

.timeline-item:not(:last-child) .segment-fill {
  position: absolute;
  bottom: 3px;
  width: 100%;
  height: 2px;
  background-color: var(--tl-white);
  transition: width .35s ease;
}

/* =============================
    Vista previa en el editor
    ============================= */
.soct-timeline.is-preview {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.soct-timeline.is-preview .preview-item {
  width: 100%;
}

.hito-slide.preview {
  max-width: 100%;
}

@media (max-width: 767px){

  /* ----- Slide ----- */
  .hito-slide{
      flex-direction: column;
  }
  .hito-img { 
      aspect-ratio: 4/3;
      width: 100%;
      max-width:none; 
      height: max-content;
  }
  .hito-text { 
      width: auto;
      padding:24px 20px;
      gap: 5px;
      height: 100%; 
  }
  .hito-year {
      font-size:36px !important;
  }

  .swiper-wrapper{
    height: 600px;
}
    .hito-text {
        justify-content: start;
    }

  .hito-text .hito-title{
      font-size:20px !important;
  }
  .hito-text .hito-desc p {
      font-size:16px !important;
  }

  /* ----- Timeline nav como scroll horizontal ----- */
  .timeline-nav{
      overflow:hidden;
      padding-bottom:14px;
      margin-top:40px;        /* ajusta si quieres menos espacio */
  }

  .timeline-line,
  .timeline-line-fill{
    /* ANTES: top:auto; bottom:28px; 
       AHORA: dejamos que el JS calcule el top exacto y anulamos cualquier bottom fijo */
    top: auto;
    bottom: auto;
  }
  
  .timeline-list{
    margin:0;
    padding:0 16px 10px;
    list-style:none;
    display:flex;
    flex-wrap:nowrap;       /* IMPORTANTE: NO wrap */
    justify-content:flex-start;
    gap:32px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x mandatory;
  }
  .timeline-list::-webkit-scrollbar{ display:none; }

  .timeline-item{
    flex: 0 0 28vw;          /* ~2 visibles. Usa 30vw para ~3 visibles */
    min-width:120px;
    text-align:center;
    scroll-snap-align:center;
    position:relative;
  }

  .timeline-item .label{
    position:static;        /* deja de ser absoluta */
    transform:none;
    margin:0 0 6px;
    font-size:  1.125rem;
    color:rgba(255,255,255,.4);
  }

  .timeline-item .dot{
    width:10px;
    height:10px;
    margin:0 auto;
    background:rgba(255,255,255,.4);
  }

  .timeline-item.is-active .label{ color:#fff; }
  .timeline-item.is-active .dot{
    transform:scale(1.25);
    background:#fff;
  }

  /* Segmentos entre dots no se usan en mobile */
  .timeline-item .segment,
  .timeline-item .segment-fill{ display:none; }

  .soct-timeline .swiper-slide {
    height: -webkit-fill-available;
  }
}

@media (max-width: 767px){
  .timeline-item .dot{
    background: rgb(78 95 130); /* opaco (como desktop) */
  }
}