*,
        *::before,
        *::after {
            box-sizing: border-box
        }

        :root {
            --bg: #17161b;
            --text: #fff;
            --brand: #ff2d2d;
            --buy: #ff2d2d;
            --buy-hv: #3e257a;
            --buyText: #ffffff;
            --maxw: 1200px;
            --teleticket-roboto: 'Roboto', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial, sans-serif;
        }

        html,
        body {
            margin: 0;
            background: var(--bg);
            color: var(--text);
            font: 16px/1.5 var(--teleticket-roboto);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }

        .tlk-teleticket-wrap {
            max-width: var(--maxw);
            margin: 0 auto;
            padding: clamp(16px, 3vw, 28px)
        }

        /* ===== FILTROS (bg real en ::before, overlay en ::after) ===== */
        .tlk-teleticket-filters {
            position: relative;
            border-radius: 18px;
            overflow: hidden;
            margin-bottom: 26px;
            isolation: isolate
        }

        .tlk-teleticket-filters::before {
            content: "";
            position: absolute;
            inset: 0;
            background: var(--bg-url, #2a2a2a) center/cover no-repeat;
            z-index: -2
        }

        .tlk-teleticket-filters::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .55) 100%);
            z-index: -1
        }

        .tlk-teleticket-filter-row {
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 14px;
            padding: 18px 20px
        }

        .tlk-teleticket-btn {
            appearance: none;
            border: 2px solid rgba(255, 255, 255, .14);
            border-radius: 14px;
            padding: 12px 22px;
            min-width: 160px;
            background: rgba(0, 0, 0, .55);
            color: #fff;
            font-family: var(--teleticket-roboto);
            font-weight: 400;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            cursor: pointer;
            transition: .2s
        }

        .tlk-teleticket-btn:hover,
        .tlk-teleticket-btn[aria-pressed="true"] {
            background: #ff2d2d;
            color: #fff;
            border-color: transparent
        }

        /* ===== GRID ===== */
        .tlk-teleticket-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 22px;
            align-items: stretch
        }

        .tlk-teleticket-col {
            display: flex;
            min-width: 0
        }

        /* ===== CARD CUADRADA ===== */
        .tlk-teleticket-card {
            position: relative;
            border-radius: 18px;
            overflow: hidden;
            background: #000;
            box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            min-height: 0
        }

        .tlk-teleticket-figure {
            width: 100%;
            aspect-ratio: 1/1;
            overflow: hidden;
            isolation: isolate
        }

        .tlk-teleticket-img {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            z-index: 0
        }

        /* Overlay ENTRE imagen y textos */
        .tlk-teleticket-veil {
            position: absolute;
            inset: 0;
            background-color: #00000075;
            pointer-events: none;
            z-index: 1
        }

        .tlk-teleticket-veil::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 46%;
            background: linear-gradient(0deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .38) 58%, rgba(0, 0, 0, 0) 100%)
        }

        /* Capas de contenido sobre overlay */
        .tlk-teleticket-layer {
            position: absolute;
            z-index: 2
        }

        /* Badge dto */
        .tlk-teleticket-badge {
            background: var(--brand);
            padding: 6px 12px;
            border-radius: 10px;
            font-weight: 900;
            z-index: 3;
            pointer-events: none
        }

        .tlk-teleticket-top .tlk-teleticket-badge {
            position: static;
            flex: 0 0 auto;
        }

        /* Cabecera (título + badge) en contenedor para impedir superposición */
        .tlk-teleticket-top {
            position: absolute;
            top: 12px;
            left: 12px;
            right: 12px;
            display: flex;
            align-items: center;
            gap: 12px;
            z-index: 2
        }

        .tlk-teleticket-ticketsito {
            font-size: 15px;

        }

        .tlk-teleticket-title {
            margin: 0;
            line-height: 1.1;
            font-weight: 900;
            text-transform: uppercase;
            font-size: 20px;
            text-shadow: 0 2px 6px rgba(0, 0, 0, .55);
            overflow: hidden;
            flex: 1 1 auto;
            min-width: 0
        }

        .tlk-teleticket-title span {
            display: inline-block;
            white-space: nowrap
        }

        /* Pie */
        .tlk-teleticket-bottom {
            left: 16px;
            right: 16px;
            bottom: 70px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 12px
        }

        .tlk-teleticket-date {
            font-size: 22px;
            font-weight: 900
        }

        .tlk-teleticket-venue {
            max-width: 58%;
            text-align: right;
            letter-spacing: 1.4px;
            font-weight: 100;
            text-transform: uppercase;
            overflow: hidden;
            position: relative;
            mask-image: linear-gradient(90deg, transparent 0 6px, #000 24px calc(100% - 24px), transparent calc(100% - 6px));
            flex: 1 1 auto;
            min-width: 0
        }

        .tlk-teleticket-venue span {
            display: inline-block;
            white-space: nowrap
        }

        /* Cuando el recinto entra en modo marquee, alinear a la izquierda para un loop fluido */
        .tlk-teleticket-venue.is-marquee {
            text-align: left;
        }

        /* Botón comprar fijo */
        .tlk-teleticket-buy {
            left: 16px;
            right: 16px;
            bottom: 12px;
            background: var(--buy);
            color: var(--buyText);
            letter-spacing: 1.4px;
            text-transform: uppercase;
            padding: 14px;
            border-radius: 14px;
            font-weight: 600;
            text-align: center;
            cursor: pointer;
            box-shadow: 0 12px 22px rgba(0, 0, 0, .35);
            transition: transform .18s ease, filter .18s ease;
            border: 0
        }

        .tlk-teleticket-buy:hover {
            transform: translateY(-2px);
            color: var(--buyText);
            background: var(--buy-hv);
            filter: brightness(1.5)
        }

        /* ===== Fondos por tipo con CSS var ===== */
        .bg-todos {
            --bg-url: url("../images/barra-todos.jpg");
        }

        .bg-conciertos {
            --bg-url: url("../images/barra-conciertos.jpg");
        }

        .bg-navidad {
            --bg-url: url("../images/barra-navidad.jpg");
        }

        .bg-entretenimiento {
            --bg-url: url("../images/barra-entretenimiento.jpg");
        }

        /* ===== Marquee estilo Spotify (loop infinito, sin "...") ===== */
        .tlk-teleticket-scroll {
            position: relative;
            overflow: hidden;
            mask-image: linear-gradient(90deg, transparent 0 6px, #000 24px calc(100% - 24px), transparent calc(100% - 6px))
        }

        .tlk-teleticket-track {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            will-change: transform;
            animation: tlk-teleticket-loop var(--d, 12s) linear infinite
        }

        @keyframes tlk-teleticket-loop {
            from {
                transform: translateX(0)
            }

            to {
                transform: translateX(-50%)
            }
        }
        

        /* === MOBILE: el botón mantiene tamaño, el texto se adapta === */
@media (max-width: 768px) {

    /* 2 botones por fila */
    .tlk-teleticket-filter-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        width: 100%;
    }

    /* Botones con tamaño fijo y texto que se ajusta */
    .tlk-teleticket-btn {
        min-width: 0 !important;         /* evita que el texto fuerce el tamaño */
        width: 100% !important;          /* botón uniforme */
        height: 54px;                    /* misma altura para todos (ajústalo si quieres) */

        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 10px;

        white-space: nowrap;             /* NO permite salto */
        font-size: clamp(10px, 3vw, 14px); /* texto se achica si es necesario */
        overflow: hidden;
        text-overflow: ellipsis;         /* evita deformación */
    }
}