/* Tarjeta de canal y de sección: Pista (includes/tarjetas_canal/pista.php), sobre comun.css */

.tcan--pista {
    background: radial-gradient(130% 100% at 50% 110%, color-mix(in srgb, var(--c) 36%, #0b0b10), #0b0b10 72%);
}

.tcan-pista {
    position: absolute;
    inset: 0;
    z-index: 0;
    perspective: 80cqw;
    perspective-origin: 50% 0%;
}

.tcan-pista__svg {
    position: absolute;
    left: -9%;
    bottom: -12%;
    width: 118%;
    height: 112%;
    overflow: visible;
    transform: rotateX(56deg);
    transform-origin: 50% 100%;
    transition: transform 1s var(--tcan-curva);
}

a:hover .tcan--pista .tcan-pista__svg,
:hover > .tcan--pista .tcan-pista__svg {
    transform: rotateX(46deg);
}

.tcan-pista__svg--v {
    display: none;
}

.tcan-pista__suelo {
    fill: color-mix(in srgb, var(--c) 20%, #0e0e13);
}

.tcan-pista__lineas {
    fill: none;
    stroke: var(--n);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tcan-pista__red {
    stroke: #fff;
    stroke-width: 1.8;
}

.tcan-pista__trazo {
    stroke-dasharray: 1 1;
}

.tcan-pista__discontinua {
    stroke-dasharray: .018 .022;
    opacity: .8;
}

.tcan-pista__punto {
    fill: var(--n);
    stroke: none;
}

a:hover .tcan--pista .tcan-pista__trazo,
:hover > .tcan--pista .tcan-pista__trazo {
    animation: tcan-trazo 1.3s var(--tcan-curva) both;
}

@keyframes tcan-trazo {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

/* Cielo: oscurece arriba para el texto */
.tcan-pista__cielo {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(8, 8, 12, .92), rgba(8, 8, 12, .5) 42%, transparent 70%);
}

.tcan--pista .tcan-texto {
    top: 8cqh;
    bottom: auto;
}

.tcan--pista[data-l="torre"] .tcan-pista__svg--h {
    display: none;
}

.tcan--pista[data-l="torre"] .tcan-pista__svg--v {
    display: block;
    left: -6%;
    width: 112%;
    height: 100%;
    bottom: -8%;
    transform: rotateX(48deg);
}

a:hover .tcan--pista[data-l="torre"] .tcan-pista__svg--v,
:hover > .tcan--pista[data-l="torre"] .tcan-pista__svg--v {
    transform: rotateX(40deg);
}

.tcan--pista[data-l="torre"] .tcan-pista {
    perspective: 140cqw;
}

.tcan--pista[data-l="torre"] .tcan-texto {
    top: 7cqh;
}

.tcan--pista[data-l="tira"] .tcan-pista__svg,
.tcan--pista[data-l="logo"] .tcan-pista__svg,
a:hover .tcan--pista[data-l="tira"] .tcan-pista__svg,
:hover > .tcan--pista[data-l="tira"] .tcan-pista__svg,
a:hover .tcan--pista[data-l="logo"] .tcan-pista__svg,
:hover > .tcan--pista[data-l="logo"] .tcan-pista__svg {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
}

.tcan--pista[data-l="tira"] .tcan-pista__cielo,
.tcan--pista[data-l="logo"] .tcan-pista__cielo {
    background: linear-gradient(to right, rgba(8, 8, 12, .85), rgba(8, 8, 12, .35) 60%, rgba(8, 8, 12, .2));
}

.tcan--pista[data-l="tira"] .tcan-texto,
.tcan--pista[data-l="logo"] .tcan-texto {
    top: 0;
    bottom: 0;
}