/* Tecno Banners - by Tecnoambassador */
.tcbn-wrap{display:flex;justify-content:center;width:100%;box-sizing:border-box;margin:var(--tcbn-mt,0px) auto var(--tcbn-mb,48px);overflow-x:hidden;overflow-x:clip}
.tcbn-wrap *{box-sizing:border-box}
.tcbn-inner{flex:0 1 auto;width:100%;min-width:0;max-width:var(--tcbn-max,100%);margin:0 auto;padding:0 var(--tcbn-pad-d,20px)}
.tcbn-stage{position:relative}
.tcbn-track{display:grid;grid-template-columns:repeat(var(--tcbn-count,3),minmax(0,1fr));gap:var(--tcbn-gap,30px);align-items:start}
.tcbn-slide{min-width:0}
.tcbn-slide[hidden]{display:none!important}
.tcbn-link{display:block;line-height:0;text-decoration:none}
.tcbn-link picture{display:block}
/* La imagen se ve completa: ni se estira ni se corta */
.tcbn-link img{display:block;width:100%;height:auto;max-width:100%;border-radius:var(--tcbn-r-d,0)}
.tcbn-cap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:16px 0 0}
.tcbn-title{font-family:"Roboto Condensed","Arial Narrow",Arial,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#333;font-size:22px;line-height:1.15}
/* Botón: estilo original del tema (btn btn-primary + Tecno Colores); acá solo layout */
.tcbn-btn{flex:none;white-space:nowrap;text-decoration:none}
.tcbn-arrow,.tcbn-dots{display:none}

/* Efecto hover como los productos: la tarjeta sube un poquito y aparece sombra (solo con mouse, no en celular) */
.tcbn-card{transition:transform .3s ease}
.tcbn-link img{transition:box-shadow .3s ease}
@media (hover:hover) and (min-width:768px){
  .tcbn-card:hover{transform:translateY(-6px)}
  .tcbn-card:hover .tcbn-link img{box-shadow:0 14px 28px rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.10)}
}
@media (prefers-reduced-motion:reduce){.tcbn-card,.tcbn-link img{transition:none}.tcbn-card:hover{transform:none!important}}

/* Animación de entrada (se dispara al aparecer en pantalla) */
.tcbn-wrap[data-anim] .tcbn-slide{animation-duration:.8s;animation-fill-mode:both;animation-play-state:paused;animation-timing-function:cubic-bezier(.22,.8,.3,1);animation-delay:calc(var(--tcbn-i,0) * .15s)}
.tcbn-wrap[data-anim].tcbn-in .tcbn-slide{animation-play-state:running}
.tcbn-wrap[data-anim="fade_up"] .tcbn-slide{animation-name:tcbn-fade-up}
.tcbn-wrap[data-anim="zoom"] .tcbn-slide{animation-name:tcbn-zoom}
.tcbn-wrap[data-anim="slide_left"] .tcbn-slide{animation-name:tcbn-slide-left}
.tcbn-wrap[data-anim="slide_right"] .tcbn-slide{animation-name:tcbn-slide-right}
.tcbn-wrap[data-anim="flip"] .tcbn-slide{animation-name:tcbn-flip}
.tcbn-wrap[data-anim="bounce"] .tcbn-slide{animation-name:tcbn-bounce;animation-duration:1s;animation-timing-function:ease-out}
@keyframes tcbn-fade-up{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes tcbn-zoom{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes tcbn-slide-left{from{opacity:0;transform:translateX(-70px)}to{opacity:1;transform:none}}
@keyframes tcbn-slide-right{from{opacity:0;transform:translateX(70px)}to{opacity:1;transform:none}}
@keyframes tcbn-flip{from{opacity:0;transform:perspective(900px) rotateY(-80deg)}to{opacity:1;transform:perspective(900px) rotateY(0)}}
@keyframes tcbn-bounce{0%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.97)}85%{transform:scale(1.015)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tcbn-wrap[data-anim] .tcbn-slide,.tcbn-wrap[data-anim] .tcbn-track{animation:none!important}}

@media (max-width:767px){
  .tcbn-inner{padding:0 var(--tcbn-pad-m,12px)}
  .tcbn-track{display:flex;gap:var(--tcbn-gap-m,14px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:flex-start}
  .tcbn-track::-webkit-scrollbar{display:none}
  .tcbn-slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
  /* en celular se anima el slider completo (no cada imagen) para que no choquen */
  .tcbn-wrap[data-anim] .tcbn-slide{animation:none!important}
  .tcbn-wrap[data-anim] .tcbn-track{animation-duration:.8s;animation-fill-mode:both;animation-play-state:paused;animation-timing-function:cubic-bezier(.22,.8,.3,1)}
  .tcbn-wrap[data-anim].tcbn-in .tcbn-track{animation-play-state:running}
  .tcbn-wrap[data-anim="fade_up"] .tcbn-track{animation-name:tcbn-fade-up}
  .tcbn-wrap[data-anim="zoom"] .tcbn-track{animation-name:tcbn-zoom}
  .tcbn-wrap[data-anim="slide_left"] .tcbn-track{animation-name:tcbn-slide-left}
  .tcbn-wrap[data-anim="slide_right"] .tcbn-track{animation-name:tcbn-slide-right}
  .tcbn-wrap[data-anim="flip"] .tcbn-track{animation-name:tcbn-flip}
  .tcbn-wrap[data-anim="bounce"] .tcbn-track{animation-name:tcbn-bounce;animation-duration:1s;animation-timing-function:ease-out}
  .tcbn-link img{border-radius:var(--tcbn-r-m,0)}
  .tcbn-cap{padding-top:12px}
  .tcbn-title{font-size:19px;padding-left:12px}
  .tcbn-arrow{display:flex;position:absolute;top:40%;transform:translateY(-50%);z-index:2;width:34px;height:34px;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:24px;line-height:1;padding:0 0 3px;cursor:pointer}
  .tcbn-prev{left:8px}
  .tcbn-next{right:8px}
  .tcbn-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
  .tcbn-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#c9c9c9;cursor:pointer}
  .tcbn-dot.is-active{background:var(--tc-primary,#0a82d2)}
}

/* 1.0.19 - Emparejar con el front: misma letra, color y formato que los productos y los botones del tema (Tecno Colores) */
html .tcbn-title{font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.45px;line-height:20px;text-transform:uppercase;color:#494949}
html .tcbn-btn{font-family:inherit;font-size:12.7px;font-weight:400;letter-spacing:0;line-height:1;text-transform:uppercase;padding:.65rem .7rem;min-height:34px;border-radius:2px;box-shadow:none}
html .tcbn-btn:hover,html .tcbn-btn:focus{transform:none;box-shadow:none}
@media (max-width:767px){html .tcbn-title{font-size:13px}}