/*
 * Rediseño 2026 — Imagen con borde
 *
 * Referencias Figma:
 * - Imagen + marco: node 237:434
 * - Marco aislado: node 406:672 / 406:675
 *
 * El marco se construye exclusivamente con recursos gráficos exportados
 * de Figma e incluidos en el ZIP. No se dibuja con border ni pseudo-elementos.
 */

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

.r26-image-border {
    --r26-outer-width: 774.5;
    --r26-outer-height: 490;
    --r26-image-left: 78.5;
    --r26-image-top: 66;
    --r26-image-width: 657;
    --r26-image-height: 422;
    --r26-border-size: 5px;

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

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

.r26-image-border__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none !important;
    object-fit: cover;
    object-position: center center;
}

.r26-image-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 Figma 237:434
 * Imagen: x 78.5 / y 66 / 657 x 422 dentro de 774.5 x 490.
 * --------------------------------------------------------- */

.r26-image-border--top-left .r26-image-border__media {
    left: 10.1356%;
    top: 13.4694%;
    width: 84.829%;
    height: 86.1224%;
}

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

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

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

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

/* ---------------------------------------------------------
 * Variantes: mismo recurso gráfico, reflejado sin redibujarlo.
 * --------------------------------------------------------- */

.r26-image-border--top-right .r26-image-border__media {
    right: 10.1356%;
    top: 13.4694%;
    width: 84.829%;
    height: 86.1224%;
}

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

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

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

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

.r26-image-border--bottom-left .r26-image-border__media {
    left: 10.1356%;
    bottom: 13.4694%;
    width: 84.829%;
    height: 86.1224%;
}

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

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

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

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

.r26-image-border--bottom-right .r26-image-border__media {
    right: 10.1356%;
    bottom: 13.4694%;
    width: 84.829%;
    height: 86.1224%;
}

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

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

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

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

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

    .r26-image-border__line {
        /* Mantiene un grosor visual próximo al diseño al reducir el módulo. */
        --r26-border-size: clamp(3px, 0.65vw, 5px);
    }
}