#teleticket-carrusel-tlk {
  --bg: #0c0c1200;
  --surface: #12131c;
  --text: #ffffff;
  --muted: #c7c9d3;
  --brand: #ff2d2d;
  --btn: #ff2d2d;
  --btnText: #14151c;
  --radius: 8px;
  --shadow: 0 16px 34px rgba(0, 0, 0, .5);
  --shadow-strong: 0 24px 60px rgba(0, 0, 0, .65);
  --maxw: 1200px;
  --teleticket-roboto: 'Roboto', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial;
  position: relative;
}

#teleticket-carrusel-tlk *,
#teleticket-carrusel-tlk *::before,
#teleticket-carrusel-tlk *::after { box-sizing: border-box; }

.teleticket-container-tlk {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(16px, 3vw, 32px);
}

/* el viewport debe ser el ancla visual */
.teleticket-carousel-viewport-tlk {
  position: relative;
  overflow: hidden;
}

.teleticket-carousel-track-tlk {
  display: flex;
  gap: 0;
  will-change: transform;
  transition: transform .75s cubic-bezier(.19, 1, .22, 1);
}

.teleticket-event-card-tlk {
  position: relative;
  flex: 0 0 25%;
  height: 465px;
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
  transform: translateZ(0);
  transition: transform .75s cubic-bezier(.19, 1, .22, 1), box-shadow .28s cubic-bezier(.22, .61, .36, 1);
}
@media (max-width: 1024px){ .teleticket-event-card-tlk { flex-basis: 50%; } }

.teleticket-event-card-tlk:hover { transform: scale(1.02); box-shadow: var(--shadow-strong); z-index: 2; }

.teleticket-media-tlk { position: absolute; inset: 0; }
.teleticket-media-tlk img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1);
  transition: transform .75s cubic-bezier(.19, 1, .22, 1);
}
.teleticket-event-card-tlk:hover .teleticket-media-tlk img { transform: scale(1.04); }

.teleticket-media-tlk::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.85) 100%);
}

.teleticket-overlay-tlk{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; padding:16px; text-align:center; pointer-events:none;
}
.teleticket-overlay-tlk a, .teleticket-overlay-tlk button { pointer-events:auto; }

.teleticket-ribbon-tlk{
  position:absolute; top:12px; left:12px; background:var(--brand);
  font-family:var(--teleticket-roboto); color:#fff; font-weight:800; font-size:.78rem;
  padding:6px 10px; border-radius:8px;
}

.teleticket-stack-tlk{ width:100%; display:flex; flex-direction:column; align-items:center; gap:8px; }

.teleticket-title-tlk{
  margin:0; font-weight:900; font-family:var(--teleticket-roboto);
  letter-spacing:.02em; font-size:clamp(18px,2.2vw,22px);
  transition: transform .75s cubic-bezier(.19, 1, .22, 1);
}
.teleticket-event-card-tlk:hover .teleticket-title-tlk{ transform:translateY(-6px); }

.teleticket-meta-tlk{
  color:#ffffff; font-family:var(--teleticket-roboto); font-weight:500;
  opacity:0; transform:translateY(8px); max-height:0; overflow:hidden;
  transition: opacity .28s cubic-bezier(.22,.61,.36,1), transform .28s cubic-bezier(.22,.61,.36,1), max-height .28s cubic-bezier(.22,.61,.36,1);
}

.teleticket-buy-tlk{
  display:inline-flex; align-items:center; gap:10px; background:var(--btn); color:var(--btnText);
  font-family:var(--teleticket-roboto); font-weight:900; text-decoration:none; padding:6px 14px; border:0;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  opacity:0; transform:translateY(8px); max-height:0; overflow:hidden;
  transition: opacity .28s cubic-bezier(.22,.61,.36,1), transform .28s cubic-bezier(.22,.61,.36,1), max-height .28s cubic-bezier(.22,.61,.36,1), padding-right .28s cubic-bezier(.22,.61,.36,1);
}
.teleticket-buy-tlk .teleticket-arrow-ico-tlk{
  width:0; height:16px; overflow:hidden; display:inline-block; transition: width .25s ease, transform .25s ease;
}
.teleticket-buy-tlk:hover{ padding-right:8px; color:var(--btnText); text-decoration:none; }
.teleticket-buy-tlk:hover .teleticket-arrow-ico-tlk{ width:16px; transform:translateX(2px); }

.teleticket-event-card-tlk:hover .teleticket-meta-tlk,
.teleticket-event-card-tlk:hover .teleticket-buy-tlk{ opacity:1; transform:none; max-height:80px; }

.teleticket-dots-tlk{
  display:flex; gap:10px; justify-content:center; margin-top:16px;
}
.teleticket-dot-tlk{
  width:10px; height:10px; border-radius:999px; background:#9e9ea38d; border:0; cursor:pointer;
  transition: transform .75s cubic-bezier(.19,1,.22,1), background .3s cubic-bezier(.22,.61,.36,1);
}
.teleticket-dot-tlk.active{ background:#ff0000; transform:scale(1.25); }

/* ===== FLECHAS: forzar posición por CSS y anular el inline del JS ===== */
#teleticket-carrusel-tlk .teleticket-nav-arrow-tlk{
  position:absolute;
  top:50% !important;                      /* ignora top en px del JS */
  transform: translateY(-50%);
  background:none;
  color:#ffffff !important;
  border:0;
  padding:0;
  cursor:pointer;
  z-index:9999;
  pointer-events:auto;
  /* Área clickeable cómoda */
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:999px;
  backdrop-filter: saturate(1.2) blur(2px);
  -webkit-backdrop-filter: saturate(1.2) blur(2px);
}

#teleticket-prev-tlk{
  left:12px !important;                   /* fija al borde izquierdo */
  right:auto !important;
}

#teleticket-next-tlk{
  right:12px !important;                  /* fija al borde derecho */
  left:auto !important;                   /* evita que el JS deje un left en px */
}

#teleticket-carrusel-tlk .teleticket-nav-arrow-tlk svg{
  width:28px; height:28px;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.6));
  transition: transform .25s ease;
}
#teleticket-carrusel-tlk .teleticket-nav-arrow-tlk:hover svg{ transform: scale(1.5); }
#teleticket-carrusel-tlk .teleticket-nav-arrow-tlk:focus{ outline:2px solid rgba(255,255,255,.6); }

@media (max-width:1024px){
  #teleticket-prev-tlk{ left:6px !important; }
  #teleticket-next-tlk{ right:6px !important; }
}