/* ===== Whooo Timeline – Base ===== */
.timeline-wrapper{--gap:16px;--line:2px;--radius:14px;margin:8px 0 16px 0}
.timeline-notice{padding:12px 14px;border:1px dashed #ddd;border-radius:8px;background:#fafafa}

/* ===== Abas (anos) ===== */
.timeline-years{display:flex;gap:28px;margin:10px 0 22px 0;align-items:center;justify-content:center}
.timeline-year{background:none;border:0;cursor:pointer;font-weight:700;opacity:.45;padding:8px 2px;position:relative}
.timeline-year.is-active{opacity:1}
.timeline-year.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:#c8a44b}

/* ===== Pulse (bolinhas) ===== */
@keyframes whooo-pulse {
  0% { transform:translate(-50%,-50%) scale(1); opacity:.35; }
  50% { transform:translate(-50%,-50%) scale(1.35); opacity:.18; }
  100% { transform:translate(-50%,-50%) scale(1); opacity:.35; }
}

/* ===== Barra de anos com setas ===== */
.timeline-years.nav-arrows{
  display:flex;align-items:center;justify-content:center;
  gap:0;margin:10px 0 22px 0;padding-left:150px
}
.timeline-years.nav-arrows .year-prev,
.timeline-years.nav-arrows .year-next{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  background:transparent;color:#888;border:none;border-radius:0;
  cursor:pointer;line-height:1;transition:background .2s ease,color .2s ease;
}
.timeline-years.nav-arrows .year-prev:hover,
.timeline-years.nav-arrows .year-next:hover{
  background:#111;color:#fff;
}
.timeline-years.nav-arrows .year-current{
  font-weight:800;min-width:90px;text-align:center;position:relative;
}
.timeline-years.nav-arrows .year-current::after{content:none}
.timeline-years.nav-arrows .timeline-year.is-active::after{content:none}

/* =========================================================
   HORIZONTAL
   ========================================================= */
.layout-horizontal .timeline-h-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
}
.layout-horizontal .timeline-h-viewport{
  position:relative;overflow:hidden;--lineY:137px;z-index:0;
  padding-top:calc(var(--lineY) + -148px);padding-bottom:64px;
}
.layout-horizontal .timeline-h-viewport::before{
  content:"";position:absolute;left:0;right:0;top:var(--lineY);height:1px;
  background:#888888;z-index:0;
}
.layout-horizontal .timeline-h-viewport::after{content:none}
.layout-horizontal .timeline-h-track{
  display:flex;gap:64px;transition:transform .35s ease;will-change:transform;
  margin:0;padding:0;list-style:none;align-items:flex-start;position:relative;z-index:1;
}
.layout-horizontal .timeline-h-item{
  list-style:none;display:flex;flex-direction:column;align-items:center;
  position:relative;flex:0 0 calc((100% - (64px * 4)) / 5);
  max-width:calc((100% - (64px * 4)) / 5);
}
.layout-horizontal .h-card{text-align:center;margin-bottom:22px;}
.layout-horizontal .h-title{
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:14px;margin:.2rem 0;
}
.layout-horizontal .h-date{display:none;}
.layout-horizontal .h-media{margin:8px 0;}
.layout-horizontal .h-content p{
  margin:.4rem 0;font-family:'Montserrat',sans-serif;
  font-weight:400;font-size:14px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;cursor:pointer;position:relative;
  max-height:3em;
}
.layout-horizontal .h-dot{
  position:absolute;left:50%;transform:translateX(-50%);
  top:calc(var(--lineY) - 6px);width:12px;height:12px;border-radius:50%;
  background:#111;z-index:2;transition:background .25s ease;
}
.layout-horizontal .h-dot::after{
  content:"";position:absolute;top:50%;left:50%;
  width:100%;height:100%;border-radius:50%;background:#111;
  transform:translate(-50%,-50%);animation:whooo-pulse 2s infinite;
}
.layout-horizontal .h-dot:hover{background:#DFAC12;}
.layout-horizontal .h-dot:hover::after{background:#DFAC12;}

/* ===== Arrows (slider controls) ===== */
.layout-horizontal .timeline-h-row{position:relative;}
.layout-horizontal .nav{
  position:absolute;bottom:-28px;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #111;border-radius:0;cursor:pointer;line-height:1;
  color:#DFAC12;font-weight:700;z-index:3;margin-top:0;
}
.layout-horizontal .nav.prev{left:50%;transform:translateX(-38px);}
.layout-horizontal .nav.next{left:50%;transform:translateX(2px);}
.layout-horizontal .nav:hover{
  background:#111;color:#fff;border-color:#111;
}
.layout-horizontal .timeline-h-pages{
  display:flex;justify-content:center;gap:6px;margin-top:8px;
}
.layout-horizontal .timeline-h-pages .dot{
  width:6px;height:6px;border-radius:999px;background:#ddd;display:inline-block;
}
.layout-horizontal .timeline-h-pages .dot.is-active{background:#111;}

/* =========================================================
   VERTICAL
   ========================================================= */
.layout-vertical .timeline-v-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:36px;}
.layout-vertical .timeline-v-col{list-style:none;margin:0;padding:0;position:relative;}
.layout-vertical .v-line{
  position:absolute;left:12px;top:0;bottom:0;width:2px;background:#d9d9d9;z-index:1;
}
.layout-vertical .v-item{
  position:relative;padding-left:36px;margin-bottom:18px;list-style:none;
}
.layout-vertical .v-dot{
  position:absolute;left:7px;top:8px;width:12px;height:12px;border-radius:50%;
  background:#111;z-index:2;transition:background .25s ease;
}
.layout-vertical .v-dot::after{
  content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;
  border-radius:50%;background:#111;transform:translate(-50%,-50%);
  animation:whooo-pulse 2s infinite;
}
.layout-vertical .v-dot:hover{background:#DFAC12;}
.layout-vertical .v-dot:hover::after{background:#DFAC12;}
.layout-vertical .v-card{border-radius:14px;padding:14px;background:#fff;}
.layout-vertical .v-date{display:none;}
.layout-vertical .v-title{
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:14px;margin:0 0 4px;
}
.layout-vertical .v-media{margin:8px 0;}
.layout-vertical .v-content p{
  margin:.45rem 0;font-family:'Montserrat',sans-serif;font-weight:400;font-size:14px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;cursor:pointer;position:relative;
  max-height:3em;
}

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width:640px){
  .layout-horizontal .timeline-h-item{
    flex:0 0 calc((100% - 64px) / 2);
    max-width:calc((100% - 64px) / 2);
  }
  .layout-vertical .timeline-v-grid{
    grid-template-columns:repeat(2,1fr);gap:24px;
  }
  .timeline-years{gap:16px;margin-bottom:22px;}
  .layout-horizontal .h-title,.layout-vertical .v-title{font-size:14px;}
}

/* =========================================================
   Ajustes extras no Desktop
   ========================================================= */
@media (min-width:641px){
  .timeline-years{margin-bottom:47px;}
}

/* =========================================================
   Tooltip estilizado (balão)
   ========================================================= */
.whooo-tooltip{
  position:absolute;
  background:rgba(0,0,0,0.9);
  color:#fff;
  font-size:13px;
  line-height:1.4;
  padding:6px 10px;
  border-radius:6px;
  max-width:280px;
  z-index:99999;
  pointer-events:none;
  white-space:normal;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease;
  box-shadow:0 2px 6px rgba(0,0,0,0.25);
}
.whooo-tooltip.is-visible{
  opacity:1;
  transform:translateY(0);
}
.whooo-tooltip::after{
  content:"";
  position:absolute;
  bottom:-6px;
  left:50%;
  transform:translateX(-50%);
  border-width:6px;
  border-style:solid;
  border-color:rgba(0,0,0,0.9) transparent transparent transparent;
}