/* Timeline for Elementor (v1.2.0) */
.ctm-timeline{
  --sand: #f4f2ee;
  --black: #000;
  --rail-x: var(--ctm-rail-x, 30px);
  --rail-w: var(--ctm-rail-w, 1px);
  --rail-color: var(--ctm-rail-color, #000);

  --bullet-size: var(--ctm-bullet-size, 28px);
  --bullet-bg: var(--ctm-bullet-bg, var(--sand));
  --bullet-border: var(--ctm-bullet-border, var(--black));
  --bullet-active-bg: var(--ctm-bullet-active-bg, var(--black));
  --bullet-text: var(--ctm-bullet-text, #000);
  --bullet-text-active: var(--ctm-bullet-text-active, #f4f2ee);

  --item-pad-left: var(--ctm-item-pad-left, 80px);
  --item-margin-vh: var(--ctm-item-margin-vh, 18vh);
  --item-minh-vh: var(--ctm-item-minh-vh, 50vh);

  --title-size: var(--ctm-title-size, 24px);
  --title-color: var(--ctm-title-color, #111);
  --text-size: var(--ctm-text-size, 16px);
  --text-color: var(--ctm-text-color, #333);
  --text-leading: var(--ctm-text-leading, 1.55);

  --fade-strength: var(--ctm-fade-strength, 60%);
  --rail-anim-ms: var(--ctm-rail-anim-ms, 350ms);

  --max-width: var(--ctm-max-width, 1100px);
  --left-min: var(--ctm-left-min, 320px);
  --left-max: var(--ctm-left-max, 520px);
  --padding-y: var(--ctm-padding-y, 40px);
  --gap: var(--ctm-gap, 32px);
}

.ctm-timeline{
  max-width: var(--max-width);
  margin:0 auto;
  padding: var(--padding-y) 16px calc(var(--padding-y) + 80px);
  display:grid;
  grid-template-columns: minmax(var(--left-min), var(--left-max)) 1fr;
  align-items:start;
  gap: var(--gap);
}

.ctm-timeline .images{ position:sticky; top:24px; align-self:start; min-height:calc(100dvh - 48px); display:grid; place-items:center; }
.ctm-timeline .images.not-sticky{ position:relative; top:auto; }
.ctm-timeline .images img{ display:none; max-width:100%; max-height:74vh; width:auto; height:auto; object-fit:contain; }
.ctm-timeline .images img.active{ display:block; }

.ctm-timeline .items{ position:relative; }
.ctm-timeline .rail{
  position:absolute;
  left:var(--rail-x);
  top:0;
  width:var(--rail-w);
  background:var(--rail-color);
  height:0;
  transition:height var(--rail-anim-ms) ease-out;
  will-change:height;
}

.ctm-timeline .item{
  position:relative;
  padding-left: var(--item-pad-left);
  margin: var(--item-margin-vh) 0;
  min-height: var(--item-minh-vh);
  opacity:.4;
  transform:translateY(24px);
  transition:opacity .4s ease, transform .4s ease, filter .4s ease;
}
.ctm-timeline .item.active{ opacity:1; transform:translateY(0); filter:blur(0) }

.ctm-timeline .bullet{
  position:absolute; left:var(--rail-x); top:0; transform:translate(-50%,0);
  width:var(--bullet-size); height:var(--bullet-size);
  border:1px solid var(--bullet-border); border-radius:50%;
  background:var(--bullet-bg);
  display:grid; place-items:center;
  font:600 13px/1 sans-serif;
  color: var(--bullet-text);
  z-index:2;
}
.ctm-timeline .bullet.connected,
.ctm-timeline .bullet.active{
  background: var(--bullet-active-bg);
  border-color: var(--bullet-active-bg);
  color: var(--bullet-text-active);
}

.ctm-timeline .item .item-title{ margin:0 0 10px; font-size: var(--title-size); font-weight:600; display: block; color: var(--title-color); }
.ctm-timeline .item p{ margin:0; line-height: var(--text-leading); font-size: var(--text-size); color: var(--text-color); }

/* Desktop: oculta imagen interna */
@media (min-width: 769px){
  .ctm-timeline .item-image{ display:none; }
}

/* Mobile */
@media (max-width: 768px){
  .ctm-timeline{ grid-template-columns: 80px 1fr; gap:20px }
  .ctm-timeline .images{ display:none }
  .ctm-timeline .items{ grid-column: 1 / span 2; }

  .ctm-timeline .item{
    padding-left: var(--ctm-m-item-pad-left, 70px);
    margin: var(--ctm-m-item-margin-vh, 12vh) 0;
    min-height: var(--ctm-m-item-minh-vh, 36vh);
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  .ctm-timeline[data-mobile-images="hide"] .item-image{ display:none !important; }
  .ctm-timeline[data-mobile-images="always"] .item-image{ display:block !important; visibility:visible !important; opacity:1 !important; }
  .ctm-timeline[data-mobile-images="active"] .item-image{ display:block; margin-bottom:12px; visibility:hidden; opacity:0; transition:opacity .25s ease; }
  .ctm-timeline[data-mobile-images="active"] .item.active .item-image{ visibility:visible; opacity:1; }
  .ctm-timeline .item-image img{ width:100%; height:auto; display:block }
}