/*
 * Rediseño 2026 — Vídeo YouTube con borde v1.1.0
 *
 * Basado en el módulo Imagen con borde.
 * Conserva exactamente la geometría del marco y sus cuatro variantes.
 */

.r26-video-border-wrap,
.r26-video-border-wrap * {
    box-sizing: border-box;
}

.r26-video-border-wrap {
    width: 100%;
    max-width: 775px;
    margin-right: auto;
    margin-left: auto;
}

.r26-video-border,
.r26-video-border * {
    box-sizing: border-box;
}

.r26-video-border {
    --r26-border-size: 5px;

    position: relative;
    width: 100%;
    max-width: 775px;
    aspect-ratio: 774.5 / 490;
    margin: 0;
    isolation: isolate;
}

.r26-video-border__media {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    border-radius: 5px;
    background: #000;
}

.r26-video-border__iframe {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.r26-video-border__line {
    position: absolute;
    z-index: 3;
    display: block;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    pointer-events: none;
    user-select: none;
}

/* Posición original */
.r26-video-border--top-left .r26-video-border__media {
    left: 10.1356%;
    top: 13.4694%;
    width: 84.829%;
    height: 86.1224%;
}

.r26-video-border--top-left .r26-video-border__line--top {
    left: 0;
    top: 13.1633%;
    width: 95.157%;
    height: var(--r26-border-size);
}

.r26-video-border--top-left .r26-video-border__line--bottom {
    right: 0;
    bottom: 0;
    width: 89.7353%;
    height: var(--r26-border-size);
}

.r26-video-border--top-left .r26-video-border__line--left {
    left: 9.7482%;
    top: 0;
    width: var(--r26-border-size);
    height: 99.3878%;
}

.r26-video-border--top-left .r26-video-border__line--right {
    right: 4.7773%;
    bottom: 0;
    width: var(--r26-border-size);
    height: 86.5306%;
}

/* Variante reflejada horizontalmente */
.r26-video-border--top-right .r26-video-border__media {
    right: 10.1356%;
    top: 13.4694%;
    width: 84.829%;
    height: 86.1224%;
}

.r26-video-border--top-right .r26-video-border__line--top {
    right: 0;
    top: 13.1633%;
    width: 95.157%;
    height: var(--r26-border-size);
    transform: scaleX(-1);
}

.r26-video-border--top-right .r26-video-border__line--bottom {
    left: 0;
    bottom: 0;
    width: 89.7353%;
    height: var(--r26-border-size);
    transform: scaleX(-1);
}

.r26-video-border--top-right .r26-video-border__line--left {
    left: 4.7773%;
    bottom: 0;
    width: var(--r26-border-size);
    height: 86.5306%;
    transform: scaleX(-1);
}

.r26-video-border--top-right .r26-video-border__line--right {
    right: 9.7482%;
    top: 0;
    width: var(--r26-border-size);
    height: 99.3878%;
    transform: scaleX(-1);
}

/* Variante reflejada verticalmente */
.r26-video-border--bottom-left .r26-video-border__media {
    left: 10.1356%;
    bottom: 13.4694%;
    width: 84.829%;
    height: 86.1224%;
}

.r26-video-border--bottom-left .r26-video-border__line--top {
    left: 0;
    top: 0;
    width: 89.7353%;
    height: var(--r26-border-size);
    transform: scaleY(-1);
}

.r26-video-border--bottom-left .r26-video-border__line--bottom {
    right: 0;
    bottom: 13.1633%;
    width: 95.157%;
    height: var(--r26-border-size);
    transform: scaleY(-1);
}

.r26-video-border--bottom-left .r26-video-border__line--left {
    left: 9.7482%;
    bottom: 0;
    width: var(--r26-border-size);
    height: 99.3878%;
    transform: scaleY(-1);
}

.r26-video-border--bottom-left .r26-video-border__line--right {
    right: 4.7773%;
    top: 0;
    width: var(--r26-border-size);
    height: 86.5306%;
    transform: scaleY(-1);
}

/* Variante reflejada horizontal y verticalmente */
.r26-video-border--bottom-right .r26-video-border__media {
    right: 10.1356%;
    bottom: 13.4694%;
    width: 84.829%;
    height: 86.1224%;
}

.r26-video-border--bottom-right .r26-video-border__line--top {
    right: 0;
    top: 0;
    width: 89.7353%;
    height: var(--r26-border-size);
    transform: scale(-1, -1);
}

.r26-video-border--bottom-right .r26-video-border__line--bottom {
    left: 0;
    bottom: 13.1633%;
    width: 95.157%;
    height: var(--r26-border-size);
    transform: scale(-1, -1);
}

.r26-video-border--bottom-right .r26-video-border__line--left {
    left: 4.7773%;
    top: 0;
    width: var(--r26-border-size);
    height: 86.5306%;
    transform: scale(-1, -1);
}

.r26-video-border--bottom-right .r26-video-border__line--right {
    right: 9.7482%;
    bottom: 0;
    width: var(--r26-border-size);
    height: 99.3878%;
    transform: scale(-1, -1);
}


/* Enlaces inferiores. Figma 237:440-445. */
.r26-video-border__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 60px;
    width: 89.8644%;
    margin: 20px 0 0 10.1356%;
    padding: 0;
}

.r26-video-border__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    color: #151515 !important;
    font-family: "Futura PT", "Futura_PT", Futura, sans-serif !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.r26-video-border__link:hover,
.r26-video-border__link:focus,
.r26-video-border__link:visited {
    color: #151515 !important;
    text-decoration: none !important;
}

.r26-video-border__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.r26-video-border__link-arrow {
    display: block;
    flex: 0 0 24px;
    width: 24px !important;
    height: 24px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 767px) {
    .r26-video-border-wrap,
    .r26-video-border {
        max-width: 100%;
    }

    .r26-video-border {
        --r26-border-size: clamp(3px, 0.65vw, 5px);
    }

    .r26-video-border__links {
        gap: 14px 28px;
        margin-top: 16px;
    }

    .r26-video-border__link {
        font-size: 16px !important;
        line-height: 18px !important;
    }
}

@media (max-width: 520px) {
    .r26-video-border__links {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }
}