/*
 * Sección "Seleccione el medio de pago" de landing-productosServicios.
 * Pisa, solo dentro de #mediosPagos, el tamaño fijo de 314x161 px que la clase global
 * .tarjeta de assets/css/styles.css le da a la imagen (esa clase también la usa laboratorio).
 */

#mediosPagos {
    --lmp-borde: #e3e8ef;
    --lmp-borde-hover: #cbd5e1;
    --lmp-fondo: #ffffff;
    --lmp-ok: #28a745;

    .tarjeta {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 96px;
        padding: 12px 20px;
        background: var(--lmp-fondo);
        border: 2px solid var(--lmp-borde);
    }

    .tarjeta:hover {
        border-color: var(--lmp-borde-hover);
    }

    .tarjeta.seleccionada {
        border-color: var(--lmp-ok);
        box-shadow: 0 0 0 3px rgba(40, 167, 69, .18);
    }

    .tarjeta img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 64px;
        object-fit: contain;
        border-radius: 0;
    }

    .check-icon {
        top: 6px;
        right: 6px;
        padding: 3px 5px;
        font-size: 12px;
        line-height: 1;
    }
}