/* Tarjeta de partido «Versus» (includes/tarjetas_partido/versus.php). --split (la línea de corte) y data-lado los pone
   assets/js/tarjetas_partido.js según el lado del ratón */

.tpar--versus {
    --split: 50%;
    --inclina: 8%;
    background: #000;
}

.tpar-vs__mitad {
    position: absolute;
    inset: 0;
    overflow: hidden;
    transition: clip-path .6s var(--tpar-curva);
}

.tpar-vs__mitad--l {
    background: radial-gradient(circle at 22% 42%, color-mix(in srgb, var(--c-l) 72%, #fff), var(--c-l) 40%, color-mix(in srgb, var(--c-l) 55%, #000));
    clip-path: polygon(0 0, calc(var(--split) + var(--inclina)) 0, calc(var(--split) - var(--inclina)) 100%, 0 100%);
}

.tpar-vs__mitad--v {
    background: radial-gradient(circle at 78% 42%, color-mix(in srgb, var(--c-v) 72%, #fff), var(--c-v) 40%, color-mix(in srgb, var(--c-v) 55%, #000));
    clip-path: polygon(calc(var(--split) + var(--inclina)) 0, 100% 0, 100% 100%, calc(var(--split) - var(--inclina)) 100%);
}

/* El escudo en grande como marca de agua: en multiply el blanco del fondo desaparece */
.tpar-vs__marca {
    position: absolute;
    top: 50%;
    width: 80cqi;
    height: 80cqi;
    background: center / contain no-repeat;
    opacity: .22;
    filter: grayscale(1) contrast(1.6);
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: transform .8s var(--tpar-curva);
}

.tpar-vs__mitad--l .tpar-vs__marca {
    left: -24cqi;
    transform: translateY(-50%) rotate(-14deg);
}

.tpar-vs__mitad--v .tpar-vs__marca {
    right: -24cqi;
    transform: translateY(-50%) rotate(14deg);
}

.tpar-vs__marca--texto {
    display: grid;
    place-items: center;
    color: #000;
    font-size: 30cqi;
    font-weight: 800;
    filter: none;
}

.tpar--versus[data-lado="l"] .tpar-vs__mitad--l .tpar-vs__marca {
    transform: translateY(-50%) rotate(-6deg) scale(1.15);
}

.tpar--versus[data-lado="v"] .tpar-vs__mitad--v .tpar-vs__marca {
    transform: translateY(-50%) rotate(6deg) scale(1.15);
}

.tpar-vs__costura {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #fff;
    clip-path: polygon(calc(var(--split) + var(--inclina) - .45%) 0, calc(var(--split) + var(--inclina) + .45%) 0, calc(var(--split) - var(--inclina) + .45%) 100%, calc(var(--split) - var(--inclina) - .45%) 100%);
    transition: clip-path .6s var(--tpar-curva);
}

.tpar-vs__equipo {
    position: absolute;
    top: 48%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.8cqi;
    width: 30%;
    transform: translate(-50%, -50%);
    transition: left .6s var(--tpar-curva), opacity .4s;
}

/* Centrados en su mitad y un poco hacia fuera, para dejar sitio a la medalla del centro */
.tpar-vs__equipo--l {
    left: calc(var(--split) / 2 - 2%);
    color: var(--t-l);
}

.tpar-vs__equipo--v {
    left: calc(50% + var(--split) / 2 + 2%);
    color: var(--t-v);
}

.tpar-vs__equipo .tpar-escudo {
    --tam: 17cqi;
    transition: transform .5s var(--tpar-curva);
}

.tpar-vs__equipo .tpar-nombre {
    text-shadow: none;
}

.tpar--versus[data-lado="l"] .tpar-vs__equipo--l .tpar-escudo,
.tpar--versus[data-lado="v"] .tpar-vs__equipo--v .tpar-escudo {
    transform: scale(1.15);
}

.tpar--versus[data-lado="l"] .tpar-vs__equipo--v,
.tpar--versus[data-lado="v"] .tpar-vs__equipo--l {
    opacity: .55;
}

.tpar-vs__medalla {
    position: absolute;
    top: 50%;
    left: var(--split);
    z-index: 3;
    display: grid;
    place-items: center;
    min-width: 14cqi;
    height: 14cqi;
    padding: 0 1.8cqi;
    border: .55cqi solid #fff;
    border-radius: 999px;
    background: #0b0b10;
    box-shadow: 0 1cqi 3cqi rgba(0, 0, 0, .5);
    transform: translate(-50%, -50%);
    transition: left .6s var(--tpar-curva);
}

.tpar-vs__medalla .tpar-marcador {
    font-size: clamp(12px, 4.2cqi, 22px);
}

.tpar-vs__medalla .tpar-marcador i,
.tpar-vs__vs {
    color: var(--tpar-acento);
}

.tpar-vs__vs {
    font-size: clamp(14px, 5cqi, 24px);
    font-style: italic;
    font-weight: 800;
}

.tpar-vs__pie {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3.6cqi;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6cqi;
    font-size: clamp(9px, 2.5cqi, 12px);
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
    transition: opacity .3s;
}

:hover > .tpar--versus .tpar-vs__pie {
    opacity: 0;
}