/* ==========================================================================
   PB Design System
   CORE · Imagen
   Responsabilidad: Control estricto de ratios y ajuste de comportamiento visual
   ========================================================================== */

/* --------------------------------------------------------------
   Comportamiento base
-------------------------------------------------------------- */

.pb-root .imagen {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-blanco);
    overflow: hidden;
}

.pb-root .imagen picture,
.pb-root .imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------
   Aspect Ratios Universales
-------------------------------------------------------------- */

.pb-root .imagen--1-1 { aspect-ratio: 1 / 1; }
.pb-root .imagen--4-3 { aspect-ratio: 4 / 3; }
.pb-root .imagen--3-4 { aspect-ratio: 3 / 4; }
.pb-root .imagen--16-9 { aspect-ratio: 16 / 9; }
.pb-root .imagen--16-10 { aspect-ratio: 16 / 10; }

/* --------------------------------------------------------------
   Modificadores visuales genéricos
-------------------------------------------------------------- */

.pb-root .imagen--borde-arriba {
    border: none;
    border-top: var(--border-gold);
    box-shadow: var(--shadow-arriba);
}

.pb-root .imagen--borde-abajo {
    border: none;
    border-bottom: var(--border-gold);
    box-shadow: var(--shadow-abajo);
}

.pb-root .imagen--borde-izquierda {
    border: none;
    border-left: var(--border-gold);
    box-shadow: var(--shadow-izquierda);
}

.pb-root .imagen--borde-derecha {
    border: none;
    border-right: var(--border-gold);
    box-shadow: var(--shadow-derecha);
}

/* --------------------------------------------------------------
   Modificador responsivo para tarjetas 2col que apilan a 1col
-------------------------------------------------------------- */

@media (max-width: 980px) {
    .pb-root .imagen--borde-derecha {
        border-right: none;
        border-bottom: var(--border-gold);
        box-shadow: var(--shadow-abajo);
    }

    .pb-root .imagen--borde-izquierda {
        border-left: none;
        border-top: var(--border-gold);
        box-shadow: var(--shadow-arriba);
    }
}