:root{
  --ink:#104b59;
  --ink-soft:#148086;
  --paper:#eef5f4;
  --card:#ffffff;
  --accent:#17b4ba;
  --accent-soft:rgba(23,180,186,.14);
  --line:#cecccc;
  --st-track-y:56px;
  --st-gutter:50px;
  --summa-green:#8dc04d;
  --st-subcard-w:256px;
}
*{box-sizing:border-box;}
.st-wrap{
  max-width:100%;
  margin:0 auto;
  padding:70px 24px 100px;
  font-family:'Lato', system-ui, -apple-system, sans-serif;
  color:var(--ink);
  overflow:visible;
}

.st-eyebrow{
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); font-weight:700;
}
.st-title{
  font-size:clamp(28px,4vw,42px); margin:8px 0 0;
  font-weight:900; letter-spacing:-.01em; color:var(--ink);
}

/* ===== Contenedor: flechas + riel en fila ===== */
.st-timeline-wrap{
  display:flex;
  align-items:flex-start;
  gap:16px;
  overflow:visible;
}
.st-nav{
  position:static;
  flex:0 0 38px;
  flex-shrink:0;

  margin-top:calc(var(--st-track-y) - 19px);

  width:38px;
  height:38px;
  border-radius:50%;
  border:none;
  background:var(--ink);
  color:#fff;

  cursor:pointer;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(16,75,89,.28);
  transition:background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.st-nav::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:10px;
  height:10px;
  border-top:3px solid currentColor;
  border-right:3px solid currentColor;
  border-radius:1px;
}
.st-nav-prev::before{ transform:translate(-30%, -50%) rotate(-135deg); }
.st-nav-next::before{ transform:translate(-70%, -50%) rotate(45deg); }

.st-nav:hover{ background:var(--accent); transform:translateY(-1px); }
.st-nav:active{ transform:translateY(0); }
.st-nav:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.st-nav[disabled]{
  background:var(--line);
  box-shadow:none;
  cursor:default;
}
.st-nav[disabled]:hover{ background:var(--line); transform:none; }

.st-timeline{
  position:relative;
  flex:1 1 auto;
  min-width:0;

  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--st-gutter);
  scroll-padding-right:var(--st-gutter);

  padding:0 4px;
  scrollbar-width:none;
  -ms-overflow-style:none;

  cursor:grab;

  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
}
.st-timeline::-webkit-scrollbar{ display:none; }
.st-timeline.is-dragging{
  cursor:grabbing;
  scroll-snap-type:none;
}
.st-timeline a,
.st-timeline .st-card{
  -webkit-user-drag:none;
}

.st-track-inner{
  position:relative;
  display:flex;
  align-items:stretch;
  width:max-content;
  padding:var(--st-track-y) var(--st-gutter) 20px;
}

.st-track{
  position:absolute;
  top:var(--st-track-y);
  left:var(--st-gutter);
  right:var(--st-gutter);
  height:3px;
  background:var(--line);
}

.st-progress{
  position:absolute;
  top:var(--st-track-y);
  left:var(--st-gutter);
  height:3px;
  width:0px;
  background-repeat:no-repeat;
  transition:width .35s ease;
}

/* ===== st-item: aquí vive la clase de color de secuencia (ancestro común de card/dot/año) ===== */
.st-item{
  position:relative;
  flex:0 0 400px;
  width:400px;
  margin-right:28px;
  padding-top:34px;
  text-align:left;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.st-item:last-child{ margin-right:0; }
.st-item.is-visible{ opacity:1; transform:translateY(0); }

/* variante para años con más de un hito: el ancho ya no es fijo, crece según cuántos .st-sub tenga adentro */
.st-item.st-item-multi{
  flex:0 0 auto;
  width:auto;
}

/* secuencia de colores: una sola vez, en el ancestro común, hereda hacia todos sus hijos */
.st-item.st-year-c1{ --dot-c:#104b59; }
.st-item.st-year-c2{ --dot-c:#8dc04d; }
.st-item.st-year-c3{ --dot-c:#0a91bf; }
.st-item.st-year-c4{ --dot-c:#b0b0b0; }
.st-item.st-year-c5{ --dot-c:#1d8084; }
.st-item.st-year-c6{ --dot-c:#08a08d; }

.st-dot{
  position:absolute;
  top:-7.5px;
  left:50%;
  transform:translateX(-50%);
  width:18px; height:18px; border-radius:50%;
  background:var(--card);
  border:3px solid var(--line);
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
  z-index:2;
  cursor:pointer;
}
.st-dot::after{
  content:'';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:36px;
  height:36px;
}
.st-dot:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

.st-item.is-passed .st-dot{
  background:var(--dot-c, var(--ink));
  border-color:var(--dot-c, var(--ink));
}
.st-item.is-active .st-dot{
  background:var(--dot-c, var(--accent));
  border-color:var(--dot-c, var(--accent));
  transform:translateX(-50%) scale(1.3);
}

.st-item.is-active .st-card{
  border-color:var(--dot-c, var(--accent));
  box-shadow:0 4px 18px rgba(16,75,89,.16);
}

/* ===== CARD: año a la izquierda (alto completo) + columna derecha (texto+foto) ===== */
.st-card{
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:0 2px 10px rgba(16,75,89,.08);
  height:100%;
  display:flex;
  flex-direction:row;
  border-radius:10px;
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease;
}

/* franja de año: se estira a TODO el alto de la card (texto + foto), no solo al del texto */
.st-card-year{
  flex:0 0 44px;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 0;
  background:var(--dot-c, var(--summa-green));
}

.st-card-year span{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  color:#fff;
  font-weight:900;
  font-size:22px;
  letter-spacing:.06em;
  white-space:nowrap;
}

/* columna derecha: agrupa texto arriba + foto abajo (años con UN solo hito) */
.st-card-right{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
}

/* fila derecha para años con MÁS de un hito: varias sub-columnas lado a lado */
.st-card-multi-right{
  flex:1 1 auto;
  display:flex;
  align-items:stretch;
}

.st-sub{
  flex:0 0 var(--st-subcard-w);
  width:var(--st-subcard-w);
  min-width:0;
  display:flex;
  flex-direction:column;
}
.st-sub:not(:first-child){
  border-left:1px solid var(--line);
}

.st-card-body{
  flex:0 0 auto;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.st-card-body h3{
  margin:0 0 8px;
  font-size:18px;
  font-weight:800;
  color:var(--ink);
}
.st-card-body p{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:#272838;
}

.st-card-media{
  width:100%;
  height:170px;
  overflow:hidden;
  margin-top:auto;
}
.st-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(100%);
  -webkit-user-drag:none;
  user-drag:none;
  pointer-events:none;
}

.st-btn{
  display:inline-block;
  align-self:flex-start;
  margin-top:14px;
  padding:5px 15px;
  font-size:13.5px; font-weight:700; letter-spacing:.02em;
  color:#ffffff;
  background:var(--dot-c, var(--accent));
  border-radius:8px;
  text-decoration:none;
  transition:background .25s ease, transform .2s ease, filter .2s ease;
}
.st-btn:hover{
  transform:translateY(-1px);
}
.st-btn:focus-visible{ outline:2px solid var(--dot-c, var(--ink)); outline-offset:2px; }

@media (max-width:720px){
  :root{ --st-track-y:46px; --st-gutter:8px; --st-subcard-w:251px; }

  .st-wrap{
    padding-left:8px;
    padding-right:8px;
  }
  .st-timeline{
    padding-left:0;
    padding-right:0;
  }

  .st-nav{ display:none; }
  .st-item{ flex:0 0 295px; width:295px; margin-right:18px; }
  .st-card-media{ height:130px; }
}
@media (prefers-reduced-motion: reduce){
  .st-item{ transition:none; opacity:1; transform:none; }
  .st-timeline{ scroll-behavior:auto; }
}