/*
  TARS – Textual Blocks Slider
  Base CSS (mínimo). Diseña tú encima.
*/

.tbs-wrap{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.tbs-slider{
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.tbs-viewport{
  overflow: hidden;
  width: 100%;
}

.tbs-track{
  display: flex;
  align-items: stretch;
  gap: var(--tbs-gap, 16px);
  transform: translate3d(0,0,0);
  transition: transform .45s ease;
  will-change: transform;
}

.tbs-slide{
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 0;
}

/* Optional helpers if you use admin items */
.tbs-title{ margin: 0 0 8px; }
.tbs-content > :first-child{ margin-top: 0; }
.tbs-content > :last-child{ margin-bottom: 0; }

/* Arrows: simples, sin fondo */
.tbs-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 6px 10px;
  cursor: pointer;
  line-height: 1;
  font-size: 28px;
  opacity: .65;
}

.tbs-arrow:hover{
  opacity: 1;
}

.tbs-prev{ left: 6px; }
.tbs-next{ right: 6px; }

/* Dots */
.tbs-dots{
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}

.tbs-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  opacity: .35;
}

.tbs-dot.is-active{
  opacity: 1;
}

/* Helpers when controls disabled */
.tbs-wrap[data-arrows="0"] .tbs-arrow{ display:none; }
.tbs-wrap[data-dots="0"] .tbs-dots{ display:none; }

@media (max-width: 640px){
  .tbs-arrow{
    font-size: 26px;
    padding: 4px 8px;
  }
}