/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */
  .timeline {
  background-color: #003883;
  overflow: hidden;

}
  .timeline > div {
    width: 100%;
    padding-left: 35px;
    padding-right: 35px;
    position: relative;
  }
  @media (min-width: 768px) {
  .timeline > div {
    padding-left: 70px;
    padding-right: 70px;
  }
  }
  @media (min-width: 1024px) {
  .timeline > div {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 744px;
  }
  }
  @media (min-width: 1280px) {
  .timeline > div {
    width: 1140px;
  }
  }
  @media (min-width: 1440px) {
  .timeline > div {
    width: 1260px;
  }
  }
  @media (min-width: 1920px) {
  .timeline > div {
    width: 1380px;
  }
  }
  .timeline > div {
    padding-top: 115px;
    padding-bottom: 115px;

}
  @media (min-width: 1024px) {
  .timeline > div {
      padding-top: 145px;
      padding-bottom: 160px
  }
    }
  @media (min-width: 1280px) {
  .timeline > div {
      padding-top: 150px;
      padding-bottom: 160px
  }
    }
  .timeline__tagline {
    color: #4daabd;
    font-size: 2rem;
    margin-bottom: 5px;
  }
  @media (min-width: 1024px) {
  .timeline__tagline {
    font-size: 2.9rem;
    margin-bottom: 10px;
  }
  }
  @media (min-width: 1280px) {
  .timeline__tagline {
    font-size: 3.2rem;
    margin-bottom: 20px;
  }
  }
  .timeline__title {
    color: #fff;
    font-size: 4.5rem;
    font-weight: bold;
    margin-bottom: 60px;
    margin-top: 0;
  }
  @media (min-width: 1024px) {
  .timeline__title {
    font-size: 6.6rem;
    margin-bottom: 90px;
  }
  }
  @media (min-width: 1280px) {
  .timeline__title {
    font-size: 7.2rem;
    margin-bottom: 100px;
  }
  }
  .timeline__items {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 60px;
    grid-auto-rows: minmax(150px, auto);
  }
  @media (min-width: 1024px) {
  .timeline__items {
      grid-template-columns: 1fr 1fr;
      gap: 90px 90px
  }
    }
  @media (min-width: 1280px) {
  .timeline__items {
      grid-template-columns: 1fr 1fr 1fr;
      gap: 80px 120px
  }
    }
  .timeline__item {
    justify-self: center;
    position: relative;

  }
  @media (max-width: 1023px) {
  .timeline__item {
      max-width: 350px;
      padding-left: 42px

  }
    }
  .timeline__item:last-child .timeline__item-title::before {
          display: none;
        }
  @media (min-width: 1024px) {
  .timeline__item:nth-child(2n) .timeline__item-title::before {
            width: 707px
        }
          }
  @media (min-width: 1280px) {
  .timeline__item:nth-child(2n) .timeline__item-title::before {
            width: 448px
        }
          }
  @media (min-width: 1280px) {
  .timeline__item:nth-child(2n) .timeline__item-title::before {
            width: 460px
        }
          }
  @media (min-width: 1440px) {
  .timeline__item:nth-child(2n) .timeline__item-title::before {
            width: 488px
        }
          }
  @media (min-width: 1280px) {
  .timeline__item:nth-child(3n) .timeline__item-title::before {
            width: 940px
        }
          }
  @media (min-width: 1024px) {
  .timeline__item:nth-child(2n+1)::before {
          content: '';
          position: absolute;
          background-color: #4daabd;
          height: 10px;
          width: 615px;
          left: -610px;
          top: -47px
      }
        }
  @media (min-width: 1280px) {
  .timeline__item:nth-child(2n+1)::before {
          display: none
      }
        }
  @media (min-width: 1280px) {
  .timeline__item:nth-child(3n+1)::before {
          content: '';
          position: absolute;
          background-color: #4daabd;
          height: 10px;
          width: 615px;
          left: -610px;
          top: -47px
      }
        }
  @media (min-width: 1024px) {
  .timeline__item:first-child::before {
          display: none
      }
        }
  .timeline__item-title {
    font-weight: bold;
    font-size: 3rem;
    color: #fff;
    margin: 0 0 10px;
    position: relative;
    width: 100%;
    height: 2.2em;
  }
  .timeline__item-title::after {
      content: '';
      width: 18px;
      height: 18px;
      background-color: #fff;
      border-radius: 100%;
      position: absolute;
      bottom: 7px;
      left: -38px;
    }
  @media (min-width: 1024px) {
  .timeline__item-title::after {
        width: 22px;
        height: 22px;
        top: -53px;
        left: 0;
        bottom: auto;
        bottom: initial
    }
      }
  .timeline__item-title::before {
      content: '';
      position: absolute;
      background-color: #4daabd;
      width: 8px;
      height: 455px;
      left: -33px;
      top: 57px;
    }
  @media (min-width: 1024px) {
  .timeline__item-title::before {
        height: 10px;
        width: 404px;
        left: 15px;
        top: -47px
    }
      }
  @media (min-width: 1024px) {
  .timeline__item-title::before {
        width: 448px
    }
      }
  @media (min-width: 1280px) {
  .timeline__item-title::before {
        width: 488px
    }
      }
  .timeline__item-title p {
      margin: 0;
      position: absolute;
      bottom: 0;
      width: 100%;
    }
  .timeline__date {
    font-weight: bold;
    font-size: 1.8rem;
    color: #4daabd;
  }
  .timeline__image {
    overflow: hidden;
    border-radius: 15px;
    width: 100%;
    margin: 25px 0 10px;
  }
  .timeline__image img {
      display: block;
    }
  @media (min-width: 1024px) {
  .timeline__image {
      margin-bottom: 20px
  }
    }
  .timeline__item-description {
    font-size: 1.4rem;
    color: #fff;
  }
  @media (min-width: 1024px) {
  .timeline__item-description {
     font-size: 1.8rem
  }
    }
/* ============================================================
   REDESIGN (preview con ?redesign=1) — Timeline (zigzag vertical)
   FASE 1: layout (sin animación ni badges todavía).
   Para PUBLICAR: quitar el prefijo body.redesign.
   ============================================================ */
/* Contexto de apilado propio del timeline, por debajo del menú (z-index:1)
     para que los círculos/badges no tapen .region-primary-menu */
body.redesign .timeline {
    position: relative;
    z-index: 0;
  }
body.redesign .timeline__tagline { display: none; }
body.redesign .timeline__title { text-align: center; }
/* Oculta el campo Date en el nuevo diseño */
body.redesign .timeline__date { display: none; }
/* Lista de items: anula el grid viejo */
body.redesign .timeline__items {
    display: block;
    grid-template-columns: none;
    gap: 0;
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    padding-top: 40px;
    counter-reset: tl;
  }
/* ====== Item base = MOBILE: card blanca con imagen arriba ====== */
body.redesign .timeline__item {
    counter-increment: tl;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-self: stretch;
    max-width: none;
    padding-left: 0;
    margin: 0 0 30px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
  }
body.redesign .timeline__image {
    order: -1;              /* imagen arriba del todo */
    margin: 0;
    border-radius: 0;
  }
body.redesign .timeline__image img { width: 100%; height: auto; display: block; }
body.redesign .timeline__item-title {
    height: auto;
    width: auto;
    margin: 0;
    padding: 22px 22px 8px;
    color: #003883;
    font-size: 2.6rem;
    font-weight: bold;
    position: static;
  }
body.redesign .timeline__item-title::before, body.redesign .timeline__item-title::after { display: none; }
body.redesign .timeline__item-title p { position: static; width: auto; margin: 0; }
body.redesign .timeline__item-description {
    padding: 0 22px 24px;
    color: #003883;
    font-size: 1.6rem;
    line-height: 1.5;
  }
body.redesign .timeline__item-description p { line-height: 1.5; }
/* Número (círculo pequeño) sobre la imagen, esquina superior izquierda */
body.redesign .timeline__item::after {
    content: counter(tl);
    position: absolute;
    top: 14px;
    left: 14px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #595c9b;
    color: #fff;
    font-weight: bold;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
  }
/* Badges sobre la imagen, esquina superior derecha (apilados) */
body.redesign .timeline__item .field--name-spring-text {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
  }
body.redesign .timeline__item .field--name-fall-text {
    position: absolute;
    top: 66px;
    right: 14px;
    z-index: 3;
  }
/* ====== Desktop: zigzag con línea central y círculos ====== */
@media (min-width: 1024px) {
body.redesign {
    /* Card blanca detrás de título + descripción (altura completa).
       display:block para anular el display:none que el CSS viejo ponía
       en :nth-child(2n+1)::before. Radius asimétrico (esquinas internas
       —las que miran al centro— más rectas). */
    /* Círculo numerado sobre la línea central */

    /* Items pares: imagen a la izquierda, texto a la derecha */

    /* Línea central "dibujada" (crece con el scroll vía --tl-progress) */
}
    body.redesign .timeline__items::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 3px;
      margin-left: -1.5px;
      background: rgba(255, 255, 255, 0.3);
      z-index: 0;
    }

    body.redesign .timeline__item {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto 1fr;
      grid-column-gap: 3px;
      align-items: stretch;
      background: transparent;
      border-radius: 0;
      overflow: visible;
      margin-bottom: 70px;
    }
    body.redesign .timeline__item::before {
      content: '';
      display: block;
      grid-column: 1;
      grid-row: 1 / -1;
      background: #fff;
      /* Solo la esquina inferior-exterior redondeada (impares: abajo-izq) */
      border-radius: 0 0 0 20px;
      z-index: 0;
      position: static;
      width: auto;
      height: auto;
      top: auto;
      left: auto;
    }
    body.redesign .timeline__item::after {
      content: counter(tl);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 85px;
      height: 85px;
      border-radius: 50%;
      background: #595c9b;
      color: #fff;
      font-weight: bold;
      font-size: 3.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }
    body.redesign .timeline__item-title {
      grid-column: 1;
      grid-row: 1;
      z-index: 1;
      position: relative;
      padding: 44px 44px 12px;
      font-size: 4.8rem;
    }
    body.redesign .timeline__item-description {
      grid-column: 1;
      grid-row: 2;
      z-index: 1;
      position: relative;
      padding: 0 44px 44px;
      font-size: 1.8rem;
    }
    body.redesign .timeline__image {
      grid-column: 2;
      grid-row: 1 / -1;
      /* impares: imagen a la derecha → esquinas internas (izq) rectas */
      border-radius: 0 16px 16px 0;
      height: 100%;
    }
      body.redesign .timeline__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
      body.redesign .timeline__item:nth-child(2n) .timeline__item-title,
      body.redesign .timeline__item:nth-child(2n) .timeline__item-description { grid-column: 2; }
      body.redesign .timeline__item:nth-child(2n)::before {
        grid-column: 2;
        /* pares: esquina inferior-exterior (abajo-der) redondeada */
        border-radius: 0 0 20px 0;
      }
      body.redesign .timeline__item:nth-child(2n) .timeline__image {
        grid-column: 1;
        border-radius: 16px 0 0 16px;
      }
    body.redesign .timeline__items::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      width: 3px;
      margin-left: -1.5px;
      height: calc(0 * 100%);
      background: #4daabd;
      z-index: 1;
    }
  }
/* ====== Animación de carga (solo cuando el JS marca .tl-ready) ====== */
body.redesign .timeline__items.tl-ready .timeline__item-title,
    body.redesign .timeline__items.tl-ready .timeline__item-description,
    body.redesign .timeline__items.tl-ready .timeline__item::before {
      opacity: 0;
      transform: translateX(-40px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
body.redesign .timeline__items.tl-ready .timeline__image {
      opacity: 0;
      transform: translateX(40px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
body.redesign .timeline__items.tl-ready .timeline__item::after,
    body.redesign .timeline__items.tl-ready .field--name-spring-text,
    body.redesign .timeline__items.tl-ready .field--name-fall-text {
      opacity: 0;
      transition: opacity 0.5s ease 0.2s;
    }
/* Pares: la card entra desde la derecha, la imagen desde la izquierda */
body.redesign .timeline__items.tl-ready .timeline__item:nth-child(2n) .timeline__item-title,
      body.redesign .timeline__items.tl-ready .timeline__item:nth-child(2n) .timeline__item-description,
      body.redesign .timeline__items.tl-ready .timeline__item:nth-child(2n)::before { transform: translateX(40px); }
body.redesign .timeline__items.tl-ready .timeline__item:nth-child(2n) .timeline__image { transform: translateX(-40px); }
/* Item visible → todo a su sitio */
body.redesign .timeline__items.tl-ready .timeline__item.tl-in .timeline__item-title,
      body.redesign .timeline__items.tl-ready .timeline__item.tl-in .timeline__item-description,
      body.redesign .timeline__items.tl-ready .timeline__item.tl-in .timeline__image,
      body.redesign .timeline__items.tl-ready .timeline__item.tl-in::before {
        opacity: 1;
        transform: none;
      }
body.redesign .timeline__items.tl-ready .timeline__item.tl-in::after,
      body.redesign .timeline__items.tl-ready .timeline__item.tl-in .field--name-spring-text,
      body.redesign .timeline__items.tl-ready .timeline__item.tl-in .field--name-fall-text {
        opacity: 1;
      }
/* ====== Badges SPRING / FALL (field_spring_text / field_fall_text) ======
     El valor del campo = la parte de fecha (p.ej. "mid-january").
     "Spring"/"Fall" se añade como etiqueta fija en negrita. */
body.redesign .field--name-spring-text,
  body.redesign .field--name-fall-text {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    max-width: 100%;
    padding: 12px 18px;
    border-radius: 999px;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.2;
  }
body.redesign .field--name-spring-text { background: #0c2b6b; }
body.redesign .field--name-fall-text { background: #5fa9ab; }
body.redesign .field--name-spring-text::before {
    content: "Spring";
    font-weight: 700;
  }
body.redesign .field--name-fall-text::before {
    content: "Fall";
    font-weight: 700;
  }
/* Posición sobre la imagen (desktop). Impares: imagen derecha →
     badges arriba-derecha. Pares: imagen izquierda → arriba-izquierda. */
@media (min-width: 1024px) {
    body.redesign .field--name-spring-text,
    body.redesign .field--name-fall-text {
      width: 250px;
    }
    body.redesign .timeline__item .field--name-spring-text {
      position: absolute;
      top: 28px;
      right: 28px;
      z-index: 3;
    }
    body.redesign .timeline__item .field--name-fall-text {
      position: absolute;
      top: 82px;
      right: 28px;
      z-index: 3;
    }
    body.redesign .timeline__item:nth-child(2n) .field--name-spring-text,
    body.redesign .timeline__item:nth-child(2n) .field--name-fall-text {
      right: auto;
      left: 28px;
    }
  }
/* Campos Spring/Fall: ocultos en la web publicada (sin la clase .redesign).
   Solo se muestran (como badges) en el preview del rediseño. */
body:not(.redesign) .field--name-spring-text,
body:not(.redesign) .field--name-fall-text {
  display: none;
}