/* Tecno Banner by Tecnoambassador */

.tb-banner {
  --tb-color: #1d6fe8;
  --tb-color2: #0b2a5b;
  --tb-speed: 800ms;
  --tb-interval: 5000ms;
  --tb-kb: 5800ms;
  --tb-radius: 0px;
  --tb-mt: 20px;
  --tb-mb: 20px;
  --tb-fit: contain;
  --tb-g: 20px;
  --tb-ar-d: 32 / 10;
  --tb-ar-m: 5 / 6;
  position: relative;
  width: calc(100% - 2 * var(--tb-g));
  margin: var(--tb-mt) auto var(--tb-mb);
  border-radius: var(--tb-radius);
  overflow: hidden;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Ocupar todo el ancho de la pantalla (rompe el contenedor del tema) */
.tb-banner.tb--fullbleed {
  width: calc(100vw - 2 * var(--tb-g));
  max-width: none;
  margin-left: calc(50% - 50vw + var(--tb-g));
  margin-right: 0;
  border-radius: 0;
}
body:has(.tb--fullbleed) { overflow-x: clip; }

.tb-banner:focus-visible { box-shadow: 0 0 0 3px var(--tb-color); }

.tb-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: var(--tb-ar-d);
  overflow: hidden;
  background: linear-gradient(135deg, var(--tb-color2), var(--tb-color));
  touch-action: pan-y;
}

/* ---- Diapositivas (base: fade) ---- */
.tb-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tb-speed) ease, visibility 0s linear var(--tb-speed);
}
.tb-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition-delay: 0s, 0s;
}

.tb-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
a.tb-link { cursor: pointer; }

.tb-slide picture { display: block; width: 100%; height: 100%; }
.tb-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--tb-fit);
  object-position: center;
  -webkit-user-drag: none;
  user-select: none;
}

/* ---- Transición: deslizar ---- */
.tb--slide .tb-slide {
  opacity: 1;
  transform: translateX(100%);
  transition: transform var(--tb-speed) cubic-bezier(.65, 0, .35, 1);
}
.tb--slide .tb-slide.is-active { transform: none; }
.tb--slide .tb-slide.is-out-left  { transform: translateX(-100%); visibility: visible; z-index: 1; }
.tb--slide .tb-slide.is-out-right { transform: translateX(100%);  visibility: visible; z-index: 1; }

/* ---- Transición: zoom ---- */
.tb--zoom .tb-slide img {
  transform: scale(1.12);
  transition: transform calc(var(--tb-speed) * 1.6) ease;
}
.tb--zoom .tb-slide.is-active img { transform: scale(1); }

/* ---- Transición: Ken Burns (fundido + zoom lento) ---- */
.tb--kenburns .tb-slide img {
  transform: scale(1);
  transition: transform 0s linear var(--tb-speed);
}
.tb--kenburns .tb-slide.is-active img {
  transform: scale(1.1);
  transition: transform var(--tb-kb) linear 0s;
}

/* ---- Texto superpuesto ---- */
.tb-has-overlay .tb-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 42, 91, .62) 0%, rgba(11, 42, 91, .18) 55%, rgba(11, 42, 91, 0) 100%);
  pointer-events: none;
}
.tb-has-overlay:has(.tb-pos-center) .tb-link::after {
  background: radial-gradient(ellipse at center, rgba(11, 42, 91, .55), rgba(11, 42, 91, .15) 70%);
}
.tb-has-overlay:has(.tb-pos-right) .tb-link::after {
  background: linear-gradient(270deg, rgba(11, 42, 91, .62) 0%, rgba(11, 42, 91, .18) 55%, rgba(11, 42, 91, 0) 100%);
}

.tb-caption {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  width: min(560px, 82%);
  padding: 0 clamp(52px, 6vw, 96px);
  color: #fff;
  pointer-events: none;
}
.tb-caption.tb-pos-left   { left: 0;  text-align: left; }
.tb-caption.tb-pos-right  { right: 0; text-align: right; }
.tb-caption.tb-pos-center { left: 50%; transform: translate(-50%, -50%); text-align: center; width: min(720px, 86%); }

.tb-caption > * {
  margin: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.tb-slide.is-active .tb-caption > * { opacity: 1; transform: none; }
.tb-slide.is-active .tb-caption > :nth-child(1) { transition-delay: calc(var(--tb-speed) * .45); }
.tb-slide.is-active .tb-caption > :nth-child(2) { transition-delay: calc(var(--tb-speed) * .45 + .12s); }
.tb-slide.is-active .tb-caption > :nth-child(3) { transition-delay: calc(var(--tb-speed) * .45 + .24s); }

.tb-cap-title {
  font-size: clamp(1.25rem, 3.2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
.tb-cap-text {
  margin-top: .5rem !important;
  font-size: clamp(.85rem, 1.4vw, 1.15rem);
  line-height: 1.4;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.tb-cap-btn {
  display: inline-block;
  margin-top: 1rem !important;
  padding: .65em 1.4em;
  border-radius: 999px;
  background: #fff;
  color: var(--tb-color2);
  font-weight: 700;
  font-size: clamp(.8rem, 1.1vw, 1rem);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  transition: opacity .6s ease, transform .6s ease, background .2s ease, color .2s ease;
}
a.tb-link:hover .tb-cap-btn { background: var(--tb-color); color: #fff; }

/* ---- Flechas ---- */
.tb-arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 42, 91, .62);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  backdrop-filter: blur(4px);
  transition: opacity .25s ease, background .2s ease, transform .2s ease;
}
.tb-prev { left: 14px; }
.tb-next { right: 14px; }
.tb-banner:hover .tb-arrow,
.tb-arrow:focus-visible { opacity: 1; }
.tb-arrow:hover { background: var(--tb-color); transform: translateY(-50%) scale(1.08); }
.tb-arrow:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---- Puntos ---- */
.tb-dots {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(11, 42, 91, .45);
  backdrop-filter: blur(4px);
}
.tb-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: width .3s ease, background .3s ease;
}
.tb-dot:hover { background: #fff; }
.tb-dot.is-active { width: 26px; background: #fff; }
.tb-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- Barra de progreso ---- */
.tb-progress {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255, 255, 255, .18);
}
.tb-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--tb-color2), var(--tb-color));
  animation: tb-progress var(--tb-interval) linear forwards;
}
@keyframes tb-progress { to { transform: scaleX(1); } }

/* ---- Celular ---- */
@media (max-width: 767px) {
  .tb-arrow { display: none; }
  .tb-dots { bottom: 10px; padding: 5px 8px; gap: 6px; }
  .tb-dot { width: 7px; height: 7px; }
  .tb-dot.is-active { width: 20px; }
  .tb-caption { padding: 0 18px; width: 88%; }
  .tb-caption.tb-pos-center { width: 90%; }
  .tb-cap-btn { margin-top: .7rem !important; }
}

/* ---- Accesibilidad: menos movimiento ---- */
@media (prefers-reduced-motion: reduce) {
  .tb-slide, .tb-slide img, .tb-caption > *, .tb-progress span { transition-duration: .01ms !important; animation: none !important; }
  .tb--slide .tb-slide { transform: none; opacity: 0; }
  .tb--slide .tb-slide.is-active { opacity: 1; }
  .tb-progress { display: none; }
}